Best IT Recipes

Run HTML5 standard validation (form) without submit button?

Anyone who knows how I can run standard HTML5 validation on a form without using the submit button? (JavaScript or jQuery).

I want to not send a POST/GET request, just do a check.

+64
javascript jquery html5 forms
Aug 09 2018-11-21T00:
source share
11 answers

The accepted answer to this question seems to be what you are looking for.

Short review: in event handler to send send event.preventDefault() .

+20
Aug 09 '11 at 20:09
source share

After some research, I came up with the following code, which should be the answer to your question. (At least it worked for me)

First use this piece of code. $(document).ready guarantees that the code will be executed when the form is loaded in the DOM:

 $(document).ready(function() { $('#theIdOfMyForm').submit(function(event){ if(!this.checkValidity()) { event.preventDefault(); } }); });

Then just call $('#theIdOfMyForm').submit(); into your code.

UPDATE

If you really want to show in which field the user had the wrong form, add the following code after event.preventDefault();

 $('#theIdOfMyForm :input:visible[required="required"]').each(function() { if(!this.validity.valid) { $(this).focus(); // break return false; } });

He will focus on the first invalid entry.

+28
Jul 17 '13 at 11:42 on
source share

You can use reportValidity , however it has poor browser support so far. It works in Chrome, Opera and Firefox, but not in IE, not in Edge, and not in Safari:

 var myform = $("#my-form")[0]; if (!myform.checkValidity()) { if (myform.reportValidity) { myform.reportValidity(); } else { //warn IE users somehow } }

( checkValidity has better support, but does not work in IE <10).

+14
Sep 05 '17 at 13:59 on
source share

You need to submit the form in order to receive html5 confirmation. There is a way around to get what you want. Se code:

 <body> <h1>Validation Example</h1><br /> <h2>Insert just 1 digit<h2> <form id="form" onsubmit="return false"> <label>Input<input type="text" pattern="[0-9]" id="input" /></label> <input type="submit" class="hide" id="inputButton"> </form> </body>

See an example here.

Note: using .submit () form does not work for me. So I created a hidden submit button that launches the keyboard. Do not ask me why. Maybe someone can clarify this.

+10
Sep 28 '12 at 21:10
source share

The short answer is no, there is no way to “run” the default functionality for the html5 inline string before submitting the form, you can checkValidity() on certain inputs, but again does not work as you would like. If you do not want to submit the form after the verification is complete, without waiting for the default warning, you can still process this style by following these steps:

Please note: in forms that you do not want to apply CSS CSS styles, you can simply add the novalidate attribute to the form.

HTML:

 <form name="login" id="loginForm" method="POST"> <input type="email" name="username" placeholder="Email"> <input type="password" name="password" placeholder="Password"> <input type="submit" value="LOG IN" class="hero left clearBoth"> </form>

If you are not using SCSS, I highly recommend exploring it, making it more manageable, easier to write, and less confusing. Note. In the sample script, I have the exact css to be compiled. I also included a bubble style example.

SCSS:

 form:not([novalidate]) { input, textarea { &:required {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;} &:required:valid {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;} &:not(:focus):valid {box-shadow: none;border: 1px solid $g4;} &:focus:invalid {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center; @include box-shadow(0 0 5px #d45252); border-color: #b03535} } } span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2)); &:after { @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px; } .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;} }

JAVASCRIPT:

Here we can do some fun things to use the default messages and inherit them inside your own bubble or error message box.

 var form = $('form'); var item = form.find(':invalid').first(); var node = item.get(0); var pos = item.position(); var message = node.validationMessage || 'Invalid value.'; var bubble = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents(); bubble.insertAfter(item);

DEMO:

http://jsfiddle.net/shannonhochkins/wJkVS/

Enjoy it and I hope that I will help others with HTML5 form validation as it is awesome and needs to go out!

Shannon

+2
May 14, '13 at 1:04
source share

form.submit () does not work, since HTML5 validation is done before the form is submitted. When you click the submit button, HTML5 validation is performed by a trigger, and then the form is submitted if the validation is successful.

+1
Jan 28 '13 at 16:02
source share

As pointed out in other answers, use event.preventDefault () to prevent the form from submitting.

To test the form, before I write a small jQuery function that you can use (note that the element needs an identifier!)

 (function( $ ){ $.fn.isValid = function() { return document.getElementById(this[0].id).checkValidity(); }; })( jQuery );

usage example

  $('#submitBtn').click( function(e){ if ($('#registerForm').isValid()){ // do the request } else { e.preventDefault(); } });
+1
Jun 16 '14 at 10:35
source share

i used

 objectName.addEventListener('click', function() { event.preventDefault(); }

but its error is show " - undefined ", so in this case use an event parameter like

 objectName.addEventListener('click', function(event) { event.preventDefault(); }

now his work is beautiful

0
Mar 01 '16 at 12:56 on
source share

I know this is an old topic, but when there is a very complicated (especially asynchronous) verification process, there is a simple way:

 <form id="form1"> <input type="button" onclick="javascript:submitIfVeryComplexValidationIsOk()" /> <input type="submit" id="form1_submit_hidden" style="display:none" /> </form> ... <script> function submitIfVeryComplexValidationIsOk() { var form1 = document.forms['form1'] if (!form1.checkValidity()) { $("#form1_submit_hidden").click() return } if (checkForVeryComplexValidation() === 'Ok') { form1.submit() } else { alert('form is invalid') } } </script>
0
Jan 10 '17 at 22:49
source share

I think this is easier:

 $('submit').click(function(e){ if (e.isValid()) e.preventDefault(); //your code. }

this will stop submitting until the form is valid.

0
Jun 05 '17 at 15:09 on
source share

Try HTMLFormElement.reportValidity (), where this function will trigger input validations.

0
May 22, '19 at 7:02
source share


More articles:


All Articles