I have a form with a couple of buttons and I'm using jQuery Validation Plugin from http://jquery.bassistance.de/validate/. I just want to know if there is any way I can check if the form is considered in valid state by jquery validation plugin from anywhere in my javascript code.
8 Answers
Use .valid() from the jQuery Validation plugin:
$("#form_id").valid();
Checks whether the selected form is valid or whether all selected elements are valid. validate() needs to be called on the form before checking it using this method.
Where the form with id='form_id' is a form that has already had .validate() called on it.
7 Comments
Jaime Hablutzel
Thank you, I was already doing something like: $j("#myform label.error").each( function(i,e) { if($j(e).css('display') != 'none') { existErrors = true ; } }); :S Thanks
Gareth Daine
There's actually no need to have .validate() run on the form first. You can simply do if (form.valid()) {} and that will work, where 'form' is the form element you're targeting.
Gags
awesome.. i was stuck with fileupload and finally found a way through this post... waah Taaj :)
artgrohe
TypeError: $("#myForm").valid() is not a function.
StackEdd
If you are receiving a
TypeError valid() not a function add the plugin to your file since its a plugin not included in jquery library eg. <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> |
@mikemaccana answer is useful.
And I also used https://github.com/ryanseddon/H5F. Found on http://microjs.com. It's some kind of polyfill and you can use it as follows (jQuery is used in example):
if ( $('form')[0].checkValidity() ) {
// the form is valid
}
2 Comments
Bishoy Hanna
this one is better since it doesn't trigger form validation
user115014
checkValidity is native JS for checking validity of a HTMLFormElement and Forms I believe. More info here2015 answer: we have this out of the box on modern browsers, just use the HTML5 CheckValidity API from jQuery. I've also made a jquery-html5-validity module to do this:
npm install jquery-html5-validity
Then:
var $ = require('jquery')
require("jquery-html5-validity")($);
then you can run:
$('.some-class').isValid()
true
4 Comments
Parisa
can we call it on whole form not on each element?
Fester
Great! just what I was looking for
KevinAdu
I prefer this rather than the
valid function as it doesn't call the validate function and validate your form.
mikemaccana
@parisssss Made a module to do it on multiple selections as requested.
For a group of inputs you can use an improved version based in @mikemaccana's answer
$.fn.isValid = function(){
var validate = true;
this.each(function(){
if(this.checkValidity()==false){
validate = false;
}
});
};
now you can use this to verify if the form is valid:
if(!$(".form-control").isValid){
return;
}
You could use the same technique to get all the error messages:
$.fn.getVelidationMessage = function(){
var message = "";
var name = "";
this.each(function(){
if(this.checkValidity()==false){
name = ($( "label[for=" + this.id + "] ").html() || this.placeholder || this.name || this.id);
message = message + name +":"+ (this.validationMessage || 'Invalid value.')+"\n<br>";
}
})
return message;
}
1 Comment
mikemaccana
I've made a jQuery plugin to do the .each() for you.
valid() method.
Comments
iContribute: It's never too late for a right answer.
var form = $("form#myForm");
if($('form#myForm > :input[required]:visible').val() != ""){
form.submit();
}else{
console.log("Required field missing.");
}
This way the basic HTML5 validation for 'required' fields takes place without interfering with the standard submit using the form's 'name' values.
2 Comments
Geradlus_RU
Note, that
:inputand :visible selectors are jQuery extensions and not part of CSS. See details in docs
frank
A form can also be invalid because of pattern matching and not only because missing required fields
For Magento, you check validation of form by something like below.
You can try this:
require(["jquery"], function ($) {
$(document).ready(function () {
$('#my-button-name').click(function () { // The button type should be "button" and not submit
if ($('#form-name').valid()) {
alert("Validation pass");
return false;
}else{
alert("Validation failed");
return false;
}
});
});
});
Hope this may help you!
Comments
In case you're validating before submitting the form:
$(function(){
$('.needs-validation').on('submit', function(event){
if(!event.target.checkValidity()){
// Form didn't pass validation
event.preventDefault();
$(this).addClass('was-validated');
}
})
})
You can't use $('form')[0].checkValidity() with multiple forms in the view.
document.forms['formID'].reportValidity()returns true if all the form elements validity is true. (For non jQuery users)