We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. change the max attribute for a numeric text box through javascript and calling it from a change event when another numeric text box changes

change the max attribute for a numeric text box through javascript and calling it from a change event when another numeric text box changes

Subject is what I'm looking for.

I have multiple numeric text boxes.  I'd like to be able to change the max setting to catch validation issues at the client level before submit.  I have already written the code to locate the field, but am having trouble updating the max attribute and having it be applied to the current record I'm editing.

Using the most current build of asp .net core as of this post.

5 Replies
CI Christopher Issac Sunder K Syncfusion Team July 19, 2019 11:38 AM UTC

Hi Chris, 

Thank you for contacting Syncfusion support. 

While checking the reported query, we suspect that you have mapped same name attribute for multiple component with max validation using form validator. We would like to inform you that we will validate the component inside the form based on the provided name attribute. 

If you not specify any name attribute for the component, then ID for that component is automatically assigned to the name attribute. Also, please ensure that the defined our EJ2 component does not have the same name and same ID in your application. 

So, we have prepared the sample based on the requirement and attached below. 

<h4>Form Validation for Numeric TextBox</h4> 
<form id="form-element"> 
    <div> 
        <ejs-numerictextbox id="Numeric1" format="n0" change="onChange"></ejs-numerictextbox> 
    </div> 
    <div> 
        <ejs-numerictextbox id="Numeric2" format="n0" change="onChange"></ejs-numerictextbox> 
    </div> 
    <ejs-button type="button" id="submit_btn" content="submit"></ejs-button> 
</form> 
<script> 
    // sets required property in the FormValidator rules collection 
    var options = { 
        rules: { 
            'Numeric1': { required: [true, "Value is required"] }, 
            'Numeric2': { max: [10, "Please enter a value minimum of 10"] }, 
        }, 
    }; 
    // defines FormValidator to validate the MaskedTextBox 
    var formObject = new ej.inputs.FormValidator('#form-element', options); 
 
    // places error label outside the MaskedTextBox using the customPlacement event of FormValidator 
 
    formObject.customPlacement = function (element, errorElement) { 
        element.parentNode.parentNode.appendChild(errorElement); 
    }; 
    document.getElementById("submit_btn").addEventListener('click', function () { 
        if (formObject.validate()) { 
            alert("Form is Submitted!!"); 
        } 
    }); 
    function onChange() { 
        formObject.validate(); 
    } 
</script> 

  

Else, if you are setting the max property of the Numeric TextBox component, reported issue not reproduced at our end. So, please share more details (Issue reproducing sample or code example) that will help us to check and provide the exact solution. 
<div> 
    <h4>Numeric TextBox with Max property</h4> 
    <div> 
        <ejs-numerictextbox id="Numeric3" format="n0" max="5"></ejs-numerictextbox> 
    </div> 
    <div> 
        <ejs-numerictextbox id="Numeric4" format="n0" max="10"></ejs-numerictextbox> 
    </div> 
</div> 
  
To know more about NumericTextBox, please find the below documentation link. 

Please get back to us if you have any concerns. 

Thanks,
Christo 


CK chris kraft July 19, 2019 01:03 PM UTC

  • I have confirmed the there are not two numeric text boxes with the same name
  • I have confirmed that the max value is set in all numeric text boxes
  • I have read through box examples
  • Based on the information you provided, it is not possible to alter the attribute directly, but instead it requires custom validation during the on change event
  • Your first example was close to what I am looking for but I don't believe it matches the initial scope I posted.
  • I have a numeric text box I will set a value to
  • When set, it will fire the change event
  • I read the value from the triggering text box and apply a case statement to retrieve a value
  • Based on this value, I need to apply this information to a different numeric text box and set the max value
  • Your first example appears to set the max values at document ready which is not what I'm looking for.  The document has loaded and I need to trigger a change event that updates a numeric text box and alters the max possible value and enforce it.

CK chris kraft July 20, 2019 06:28 PM UTC

I read through your response again and it appears to be validating the full form.  My hope is there is a way to limit the validation to just that field.  Otherwise, it will trigger a lot of validation errors for fields that haven't been set yet.  It's somewhat a long form so I'm hoping there is a way to keep this at the control level and change the max value to prevent the spinners for going beyond the min/max as well as validation on form submit.

My main goal is to get the spinners to prevent numbers out of bounds but didn't want it to fire an event on every change.

CK chris kraft July 21, 2019 06:16 PM UTC

Bump, still looking for a solution please.

CI Christopher Issac Sunder K Syncfusion Team July 22, 2019 12:31 PM UTC

Hi Chris, 

As you requested in the update, based on the first NumericTextBox component’s value, in the change event, we have set the max value to the second NumericTextBox component. And validated the second NumericTextBox in the change and form submit action by calling the validate method with corresponding name attribute as mentioned in the below code example. 

Also, we would like to inform you that, if you are calling the validate method without any arguments, it will validate the whole form objects in the page. If we pass the corresponding name attribute in the validate method, it will validate the corresponding form object only. 

<form id="form-element"> 
    <div> 
        <ejs-numerictextbox id="Numeric1" format="n0" change="onChange"></ejs-numerictextbox> 
    </div> 
    <div> 
        <ejs-numerictextbox id="Numeric2" format="n0"></ejs-numerictextbox> 
    </div> 
    <ejs-button type="button" id="submit_btn" content="submit"></ejs-button> 
</form> 
<script> 
    // sets required property in the FormValidator rules collection 
    var options = { 
        rules: { 
            'Numeric2': { max: [10, "Please enter a value minimum of 10"] }, 
        }, 
    }; 
    // defines FormValidator to validate the MaskedTextBox 
    var formObject = new ej.inputs.FormValidator('#form-element', options); 
 
    // places error label outside the MaskedTextBox using the customPlacement event of FormValidator 
 
    formObject.customPlacement = function (element, errorElement) { 
        element.parentNode.parentNode.appendChild(errorElement); 
    }; 
    document.getElementById("submit_btn").addEventListener('click', function () { 
        if (formObject.validate("Numeric2")) { // Validate the NumericTextbox name attribute is "Numeric2" 
            alert("Form is Submitted!!"); 
        } 
    }); 
    function onChange(args) { 
        document.getElementById("Numeric2").ej2_instances[0].max = args.value; // assign the first Numeric value to the second Numeric Max value. 
        formObject.validate("Numeric2"); // Vlaidate the second NumericTextBox 
    } 
</script> 
  
Please find the modified sample from the below link. 

Please get back to us if you have any concerns. 

Thanks,
Christo 


Loader.
Up arrow icon