What changes to DOM are made when MVC Validation triggers? - javascript

I have a form in a modal window that is currently performing some validation.
(I am using ASP.NET MVC, JQuery UI, ajax forms, data annotations and unobtrusive is active)
When this validation triggers I have noticed so far that it does a few things:
1: my validation summary gets it's class changed from .validation-summary-valid to .validation-summary-errors
2: my invalid inputs have a class added to then called .input-validation-error
3: my validation messages get their class changed from .field-validation-valid to .field-validation-error
But there is something else that it is doing and I cant work out how it is tracking this.
I have a textbox that is required, before triggering the validation i can select inside this box, then select another box and the validation will be silent.
But as soon as i trigger the validation by clicking submit with an empty textbox, i can select the textbox and type something to remove the validation instantly, but if i then null it and select a different box this error is re-applied without re-submitting.
So my question is: what has changed, how does it know that I have attempted to submit already?

When validate is called, it adds a class to each input/select that is supposed to be validated. When the input/select is not valid it adds a class to the input/select:
class="input-validation-error"
When it is valid, it adds:
class="valid"
Validation only fires on the control when you change the value, not when it loses focus.
Validation fires on change, even before you submit the form. Take a required textbox, add a value to it, and tab off ... then go back and remove that value, and you should see the textbox highlighted red.

Related

Fill out input field with code doesn't trigger onChange functions

I am working on customJs for swagger.
There I want to fill out an input field in advance for my use case.
Basically I can't see the code attached to the input field generated by swagger, but I can fill the input field with inputElement.setAttribute('value',"some stuff" )
But this does not trigger function as it seems, because when I proceed to use the submit button, it says the field is empty, only after I MANUALLY typed a letter and removed it, it recognized my changes.
Can I somehow trigger whatever the underlying function might be?

How to detect changes in the asp panel through javascript?

I have many controls(like texbox,telerik grid, dropdown and radio button) on one asp panel.Could someone help me in detecting changes in any control of asp panel while clicking submit button.
There might be a better way of doing this, but my suggestion would be:
Create a hidden field that has a default value of "False". This hidden field will tell us if the form has changed or not.
Then assigning any editable control the JavaScript OnChange event.
The OnChange event should call a simple method that sets the value of the hidden field to "True".
For example with jQuery it would be:
function FormChanged() {
$(".hiddenField").val("True");
}
Then when you submit you will be able to access the value of the hidden field to know wether the form has benn changed or not.

Form validation in javascript when drop down dependency is involved

I have used ng-disabled for my form validation for ADD button.
i.e. ng-disabled="conditionForm.$invalid". But , My form contains two text boxes which are hidden at first , and when a type is selected from drop down , only the respective Text box div should be visible. The Problem i'm facing is ,when the above ng-disabled validation is used , the ADD button is still disabled when one of the text box is selected and an input is provided. After the second input is also selected from the drop-down , then the ADD button is getting enabled.
Can you please provide me with an alternate validation , where the ADD button can get enabled every time a value is selected from drop down and a valid input is provided.
If you're ng-disabled is on a form being valid or invalid it sounds like those may have required inputs set. If that is case look at using ng-required so you can explicitly set required based on expression. You can then control when the form is valid.
The exact answer: Answer

Why browsers auto complete(auto suggestion) in text field Jquery form validations not trigger?

Problem with browsers Auto suggestions.
For example prefilling the user's address based on earlier user input...
Some conditions
autocomplete="on".
i am using "jQuery Validation Plugin 1.11.1".
I am filling the wrong data and click the submit, form validations trigger
next i filled date with browsers Auto suggestions this case form
validations not trigger. Any buddy know update the solution. [Fiddle][1].
First click the submit button next enter the values you observe.
next time click auto suggestion or auto complete -> error message still exit up to focus out...
[2]: http://jsfiddle.net/thiru715/57oyLjzh/2/
` `
[1]: http://i.stack.imgur.com/PDJv8.png
The validation for each field happens when you get out of that field (blur) and on other events (keyup, form submit...)
You'd have to hack it to work, for example, customize your jQuery code so that whenever you leave any field (and thus autocompletation can have happened) the validation is trigerred for all the fields.
See this to learn how to manually trigger the validation.
You can also try to do it using the change event. I'm not sure if it will work.
Please, add this to your fiddle and test it:
$("#registerform input").change(function() {
$(this).valid();
});
I'm not able to test it, because I cannot trigger the autocomplete.
If it doesn't work, try this:
$("#registerform input").blur(function() {
$("#registerform input").valid();
});

validation not being applied when input type button element is clicked

The issue is viewable on the following webpage - http://www.bestcastleintown.co.uk/test/
I am trying to apply various validation rules to the form that features on the web page mentioned above with a jQuery plugin that utilises custom data attributes (http://formvalidator.net/index.html). This validation is present on the first 5 form fields. This is viewable when a user focuses on a field and then progresses to the next field, the previous field will lose focus and a validation message is presented.
I am encountering an issue whereby the validation is not applied when the form is submitted. This is caused by the onclick and type attributes that are present on the <input> element
<input class="btn-wpbc" type="button" onclick="mybooking_submit(this.form,1, 'en_US' );" value="Send">
I have observed that if the type attribute is changed to type="submit" and the onclick attribute is removed in Firebug or Chrome Developer Tools then the validation will be applied to the form fields.
However changing the attributes will in result the failure of calender validation as a booking is being made through an AJAX request that is initialised through the following JavaScript:
onclick="mybooking_submit(this.form,1, 'en_US' );"
The form will no longer check that a day has been selected.
Are there any suggestions for ensuring both forms of validation take effect (calender day selected and validation on form fields)?
change input type attribute to submit and call your javascript function on onsubmit event on form tag. Like-
<form onsubmit="mybooking_submit(this.form,1, 'en_US' );" >

Categories