How to Manually Trigger Validation with Jquery Validate

How to manually trigger validation with jQuery validate?

That library seems to allow validation for single elements. Just associate a click event to your button and try the following:

$("#myform").validate().element("#i1");

Examples here:

https://jqueryvalidation.org/Validator.element

jQuery validate force re-validation

As it turns out you call .valid() instead of .validate():

$('.pca-form').valid(); // this re-validates all fields

Trigger jQuery Validation Manually?

$("#myButton").click(function(e) {
    e.preventDefault();
    if($("#myform").valid()){
        // the form is valid, do something
    } else{
        // the form is invalid
    }
});

Manually Triggering Form Validation using jQuery

You can't trigger the native validation UI (see edit below), but you can easily take advantage of the validation API on arbitrary input elements:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

The first event fires checkValidity on every input element as soon as it loses focus, if the element is invalid then the corresponding event will be fired and trapped by the second event handler. This one sets the focus back to the element, but that could be quite annoying, I assume you have a better solution for notifying about the errors. Here's a working example of my code above.

EDIT: All modern browsers support the reportValidity() method for native HTML5 validation, per this answer.

jQuery validation trigger error message

Is that possible with jQuery Validate or do i need to create my own function?

Both, sort of. You can use the showErrors function to display errors on the form manually, but since you don't want this to be a rule that is enabled when you submit the form, you'll have to do your own checking for the value in the input.

Something like:

var $validator = $("#myform").validate();
$("#checkid").click(function() {
    var errors;

    if (!$("#personalid").val()) {
        /* Build up errors object, name of input and error message: */
        errors = { personalid: "Please enter an ID to check" };
        /* Show errors on the form */
        $validator.showErrors(errors);            
    }        
});

Example: http://jsfiddle.net/andrewwhitaker/XjZer/

Note that the form will still submit if there is nothing in the personalid field.

Using jquery-validate.How to change the timing of trigger validating of only one element with other elements stay default

1. The phoneMessage is validated only when the form is submitted, while other element stay default setting.

Simply override the onfocusout function with a conditional function.

onfocusout: function(element) {
    if (element.name === "phoneMessage") {
        // Disable `onfocusout` for 'phoneMessage' element
        return false;
    } else { 
        // DEFAULT `onfocusout` function
        if ( !this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
            this.element(element);
        }
    }
}

DEMO: https://jsfiddle.net/z73efhjz/

2. The invalid status of any elements can block the submit of form.

That's already the default behavior of the plugin.

FYI- The <input> tag is not a container element so there is no such thing as a </input> tag.

---

Related Topics