How to force a html5 form validation without submitting it via jQuery

Question

I have this form in my app and I will submit it via AJAX  but I want to use HTML5 for client-side validation  So I want to be able to force the form validation  perhaps via jQuery   I want to trigger the validation without submitting the form  Is it possible

User · Answer

According to the question html5 validity should be validate able using jQuery at first and in most of the answer this is not happening and the reason for this is as following:

while validating using html5 form's default function

checkValidity();// returns true/false

we need to understand that jQuery returns object array, while selecting like this

$("#myForm")

therefore, you need to specify the first index to make checkValidity() function work

$('#myForm')[0].checkValidity()

here is the complete solution:

<button type="button" name="button" onclick="saveData()">Save</button>

function saveData()
{
    if($('#myForm')[0].checkValidity()){
        $.ajax({
          type: "POST",
          url: "save.php",
          data: data,
          success: function(resp){console.log("Response: "+resp);}
        });
    }
}

User · Answer

I know this has already been answered  but I have another possible solution   If using jquery  you can do this   First create a couple of extensions on jquery so you can resuse these as needed     extend       bypassDefaultSubmit  function  formName  newSubmitMethod                  formName  submit function  event                newSubmitMethod                event preventDefault                          Next do something like this where you want to use it    lt script type  text javascript  gt        if you want to validate the form on a submit call         and you never want the form to be submitted via       a normal submit operation  or maybe you want handle it               function                bypassDefaultSubmit  form1   submit               function submit               do something  or nothing if you just want the validation         lt  script gt

User · Answer

document  on  submit   false    submitButton click function e        if  form checkValidity              form submit

User · Answer

I found this solution to work for me  Just call a javascript function like this   action  javascript myFunction      Then you have the html5 validation    really simple  -

User · Answer

To check all the required fields of form without using submit button you can use below function   You have to assign required attribute to the controls         btnSave   click function              input required    each function                                   var myForm       form1            if    myForm 0  checkValidity                                               myForm  submit

User · Answer

You don t need jQuery to achieve this  In your form add   onsubmit  return buttonSubmit this    or in JavaScript   myform setAttribute  onsubmit    return buttonSubmit this       In your buttonSubmit function  or whatver you call it   you can submit the form using AJAX  buttonSubmit will only get called if your form is validated in HTML5   In case this helps anyone  here is my buttonSubmit function   function buttonSubmit e        var ajax      var formData   new FormData        for  i   0  i  lt  e elements length  i                  if  e elements i  type     submit                         if  submitvalue    e elements i  value                                submit   e elements i                   submit disabled   true                                  else if  e elements i  type     radio                         if  e elements i  checked                  formData append e elements i  name  e elements i  value                     else             formData append e elements i  name  e elements i  value             formData append  javascript    javascript        var action   e action      status   action split      reverse   0     -status       ajax   new XMLHttpRequest        ajax addEventListener  load   manageLoad  false       ajax addEventListener  error   manageError  false       ajax open  POST   action       ajax send formData       return false      Some of my forms contain multiple submit buttons  hence this line if  submitvalue    e elements i  value   I set the value of submitvalue using a click event

User · Answer

I had a rather complex situation  where I needed multiple submit buttons to process different things  For example  Save and Delete    The basis was that it was also unobtrusive  so I couldn t just make it a normal button  But also wanted to utilize html5 validation   As well the submit event was overridden in case the user pressed enter to trigger the expected default submission  in this example save   Here is the efforts of the processing of the form to still work with without javascript and with html5 validation  with both submit and click events      jsFiddle Demo - HTML5 validation with submit and click overrides   xHTML   lt form gt       lt input type  text  required  required  value    placeholder  test    gt       lt button type  submit  name  save  gt Save lt  button gt       lt button type  submit  name  delete  gt Delete lt  button gt   lt  form gt    JavaScript    wrap our script in an annonymous function so that it can not be affected by other scripts and does not interact with other scripts   ensures jQuery is the only thing declared as    function         var isValid   null      var form      form        var submitButton   form find  button type  submit         var saveButton   submitButton filter   name  save          var deleteButton   submitButton filter   name  delete             submit form behavior     var submitForm   function e           console log  form submit              prevent form from submitting valid or invalid         e preventDefault              user clicked and the form was not valid         if isValid     false               isValid   null              return false                      user pressed enter  process as if they clicked save instead         saveButton trigger  click                  override submit button behavior     var submitClick   function e             Test form validitiy  HTML5  and store it in a global variable so both functions can use it         isValid   form 0  checkValidity            if false     isValid                 allow the browser s default submit event behavior              return true                      prevent default behavior         e preventDefault              additional processing -   ajax   etc                             alert  Success                  override submit form event     form submit submitForm          override submit button click event     submitButton click submitClick      jQuery     The caveat to using Javascript is that the browser s default onclick must propagate to the submit event MUST occur in order to  display the error messages without supporting each browser in your code  Otherwise if the click event is overridden with event preventDefault   or return false it will never propagate to the browser s submit event   The thing to point out is that in some browsers will not trigger the form submit when the user presses enter  instead it will trigger the first submit button in the form  Hence there is a console log  form submit   to show that it does not trigger

User · Answer

This is a pretty straight forward way of having HTML5 perform validation for any form  while still having modern JS control over the form   The only caveat is the submit button must be inside the  lt form gt    html   lt form id  newUserForm  name  create  gt  Email lt input type  email  name  username  id  username  size  25  required gt  Phone lt input type  tel  id  phone  name  phone  pattern        d 3     d 3   -    d 3  -    d 4   size  12  maxlength  12  required gt   lt input id  submit  type  submit  value  Create Account   gt   lt  form gt    js     bind in ready   function jQuery    submit    click  newAcctSubmit     function newAcctSubmit       var myForm   jQuery    newUserForm           html 5 is doing the form validation for us       so no need here  but backend will need to still for security    if     myForm 0  checkValidity                bonk  failed to validate  so return true which lets the        browser show native validation messages to the user     return true            post form with jQuery or whatever you want to do with a valid form    var formVars   myForm serialize      etc

User · Answer

You speak of two different things  HTML5 validation  and validation of HTML form using javascript jquery    HTML5  has  built-in options for validating a form  Such as using  required  attribute on a field  which could  based on browser implementation  fail form submission without using javascript jquery   With javascrip jquery you can do something like this     your form id   bind  submit   function           validate your form here    return  valid    true   false

User · Answer

form   submit function         saveButton   attr  disabled   true         not a best answer but works for me

User · Answer

This way works well for me    Add onSubmit attribute in your form  don t forget to include return in the value    lt form id  frm-contact  method  POST  action    onSubmit  return contact    gt   Define the function   function contact params          ajax           url   sendmail php           type   POST           dataType   json           timeout  5000          data    params params            success  function  data  textStatus  jqXHR                   callback                    error  function jqXHR  textStatus  errorThrown                console log jqXHR responseText                          return false

User · Answer

below code works for me       btn   click function           if      frm   0  checkValidity            alert  sucess        else           Validate Form             frm   0  reportValidity

User · Answer

You can do it without submitting the form   For example  if the form submit button with id  search  is in the other form   You can call click event on that submit button and call ev preventDefault after that  For my case I validate form B from Form A submission  Like this  function validateFormB ev      DOM Event object     search is in Form A       search   click      ev preventDefault        Form B validation from here on

User · Answer

This worked form me to display the native HTML 5 error messages with form validation    lt button id  btnRegister  class  btn btn-success btn btn-lg  type  submit  gt  Register  lt  button gt         RegForm   on  submit   function        if  this checkValidity      false          if form is not valid show native error messages   return false     else        if form is valid   show please wait message and disable the button       btnRegister   html   lt i class  fa fa-spinner fa-spin  gt  lt  i gt  Please Wait           this  find   submit   attr  disabled    disabled               Note  RegForm is the form id   Reference  Hope helps someone

User · Answer

var  myForm       myForm     if    myForm 0  checkValidity            lt input type  submit  gt    hide   appendTo  myForm  click   remove

User · Answer

To check whether a certain field is valid  use       myField   0  checkValidity       returns true false   To check if the form is valid  use       myForm   0  checkValidity       returns true false   If you want to display the native error messages that some browsers have  such as Chrome   unfortunately the only way to do that is by submitting the form  like this   var  myForm       myForm     if    myForm 0  checkValidity           If the form is invalid  submit it  The form won t actually submit       this will just cause the browser to display the native HTML5 error messages     myForm find   submit   click        Hope this helps  Keep in mind that HTML5 validation is not supported in all browsers

User · Answer

May be late to the party but yet somehow I found this question while trying to solve similar problem  As no code from this page worked for me  meanwhile I came up with solution that works as specified   Problem is when your  lt form gt  DOM contain single  lt button gt  element  once fired  that  lt button gt  will automatically sumbit form  If you play with AJAX  You probably need to prevent default action  But there is a catch  If you just do so  You will also prevent basic HTML5 validation  Therefore  it is good call to prevent defaults on that button only if the form is valid  Otherwise  HTML5 validation will protect You from submitting  jQuery checkValidity   will help with this   jQuery     document  ready function           buttonID   on  click   function event        var isvalidate       formID   0  checkValidity        if  isvalidate          event preventDefault             HERE YOU CAN PUT YOUR AJAX CALL                   Code described above will allow You to use basic HTML5 validation  with type and pattern matching  WITHOUT submitting form

User · Answer

if    form   0  checkValidity           ajax          url   url          type   post          data                       dataType   json          success   data  - gt               else        important          form   0  reportValidity     from  html5 form validation

User · Answer

Here is a more general way that is a bit cleaner   Create your form like this  can be a dummy form that does nothing     lt form class  validateDontSubmit  gt        Bind all forms that you dont really want to submit     document  on  submit    validateDontSubmit  function  e          prevent the form from doing a submit     e preventDefault        return false       Now lets say you have an  lt a gt   within the  lt form gt   that on click you want to validate the form       myLink   click function e       Leverage the HTML5 validation w  ajax  Have to submit to get em  Wont actually submit cuz form     has  validateDontSubmit class   var  theForm     this  closest  form        Some browsers don t implement checkValidity   if    typeof  theForm 0  checkValidity      function     amp  amp    theForm 0  checkValidity           return           if you ve gotten here - play on playa        Few notes here    I have noticed that you don t have to actually submit the form for validation to occur - the call to checkValidity   is enough  at least in chrome   If others could add comments with testing this theory on other browsers I ll update this answer  The thing that triggers the validation does not have to be within the  lt form gt   This was just a clean and flexible way to have a general purpose solution

User · Answer

I think the best approach   will be using jQuery Validation plugin which uses best practice for form validation and it also has good browser support  So you don t need to worry about browser compatibility issues   And we can use jQuery validation valid   function which checks whether the selected form is valid or whether all selected elements are valid without submitting the form    lt form id  myform  gt      lt input type  text  name  name  required gt      lt br gt      lt button type  button  gt Validate  lt  button gt   lt  form gt   lt script gt    var form        myform       form validate          button    click function         console log   Valid      form valid             lt  script gt

[jquery] How to force a html5 form validation without submitting it via jQuery

Examples related to jquery

Examples related to html

Examples related to validation