Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery.validate() but rely on native Chrome validation alerts?

I'm using jQuery Form Validator plugin..

I have a form with HTML5 required attributes flagged, similar to below:

<form role="form" id="the-form">
   <input name="name" id="name" required>
</form>

I have jQuery validating just fine:

$("#the-form").validate();

then, a button click triggers a validity check before proceeding to other stuff:

//Request Button clicked    
$("#request-btn").on("click", function() {
    if ($('#the-form').valid()){
        ...everything good... move along
    }
});

I have the logic is working just perfect. However, now that I've started using the jQuery Validation Plugin, the validation alerts are no longer being run through the browser. I'm still digging into it, but I'm guess the plugin has it's own alert classes that can be formatted.

Is there a flag to force jQuery to allow the native browser alerts to pop-up instead of its own?

The new jQuery validation notifications are breaking my form layout on screen where the Chrome alerts were working just perfect.

EDIT: Right after posting this, I was inspecting the alert, and this is what is now getting plugged in:

<label id="name-error" class="error" for="name">This field is required.</label>

Where as with Chrome, for all I can tell, is handled by Chrome on application level.

2nd EDIT This app will be specific to Chrome, so I am not worried about cross-browser and legacy browser compatibility. I actually want to let Chrome worry about validation at the field level and just use jQuery .valid() to check the validity of the entire form before moving along.

like image 508
eko Avatar asked Nov 24 '15 15:11

eko


1 Answers

Thanks to adaam's response, I was able to use the checkValidity method for HTML5 Constraint Validation:

$('#request-btn').bind('click',function(){
    if ($('#the-form')[0].checkValidity()) {
        ...do the magic stuff here... move along...
    }
})

You could just use the HTML5 Constraint Validation API checkValidity method a la jsfiddle.net/E6jhE/5 and cut out the need for jQuery validate altogether. (I'm guessing you are working on a multi-page form using a single <form> tag if you want to check validity per stage although I could be getting the wrong end of the stick) – adaam 34 mins ago

like image 102
eko Avatar answered Sep 29 '22 01:09

eko