Is it possible to mark a field invalid from javascript?

Question

From reading this post, I found that there are several pseudo classes for invalid input values ​​and invalid values.

Is there a way to mark an input field as invalid / valid from javascript? Or, alternatively, can I override the validation method used?

Answer 1

Is it possible to specify an input field as invalid / valid from JavaScript?

Unfortunately, you cannot stylize pseudo classes in JavaScript, since they are not real elements, they do not exist in the actual DOM.

Using vanilla JavaScript, you must use the validation API .

In jQuery you can just do this, http://jsfiddle.net/elclanrs/Kak6S/

if ( $input.is(':invalid') ) { ... } 

Or, alternatively, can I override the validation method used?

If you use HTML5 validation, stick with the markup. Otherwise, you can disable HTML5 validation using $form.attr('novalidate', 'novalidate') and use JS to validate your fields, and then add valid or invalid classes valid necessary. I created a plugin that works to support browsers without HTML5.

Answer 2

For this purpose you can use the customValidity function.

If you add a custom Validity to the field, it will become invalid. When you set a message as an empty string, it becomes valid again (if it is invalid for other reasons).

field.setCustomValidity("Invalid field."); will invalidate the field.

field.setCustomValidity(""); will make the field valid if it does not complete the HTML5 constraint.

Answer 3

Edit : Someone explained that you are looking for “valid” “invalid” attributes for the DOM.

I would add attributes for each tag using dom_object.setAttribute("isvalid", "true") . You can also have a central validation function that updates these attributes each time (and each time use dom_object.getAttribute("isvalid") ).

You can run this function every time an element loses focus, or whenever you want.

Not quite elegant, but unfortunately there is no pseudo support with javascript and HTML5.

---

If I understand your question, you can do a check using Javascript. However, it should be warned that it is very easy to bypass client-side validation, especially JavaScript validation validation . You should never trust client data and always perform server-side validation.

For example, I could easily find the item identifiers by checking the source code and then document.getElementById('some_id').setAttribute('max', new_number) to change the maximum value (this was one of the entries from your link).

There are various ways to do this, so I will try to give you a common idiom.

You can capture the value by doing document.getElementById('form_element_id').value (make sure you give the form a name , which is sent to the server, and an id , which is used by javascript). For text fields, you can use .innerHTML .

Then you have a value in a variable, there are several ways to check it.

For example, you can do if (parseInt(my_value) < 0) //error . You can also use regular expressions, I won’t explain everything, but you can start here http://www.w3schools.com/jsref/jsref_obj_regexp.asp . I know that w3schools is not the best source, but I think this is a good place to start.

Now for the validation part: add onsubmit="return validateForm() to the form tag, where validateForm () is the function that performs the entire validation. And the function simply returns true if it is valid and false otherwise. This overrides the validation function by default (which by default does nothing).

So, in the above example, //error will be replaced with return false . You can do other things; for example, warn the error, and then return false. You can also use javascript to highlight invalid fields (not sure if this is what you mean by " mark input field as invalid / valid from javascript )

Of course, if you do not want to check all the fields, you only need to return true if some of them pass. Again, you should not rely on this, but if you are only to restrain average people, then this is a simple solution.