How can I start form validation using HTML5 before executing the script?

html

<form action="#"> <input id="a" type="number" max="10" required> + <input id="b" type="number" max="10" required> = <input id="c" type="number" /> <button id='sub' type="submit">Посчитать</button> </form>

js

 function calc () { var a = $('#a').val(); var b = $('#b').val(); var c = a + b; $('#c').val(c); } console.log($('#a').val()); $('#sub').click(function(){ console.log('click') calc(); })

Now, if you click on the Calculate button, the result will be displayed first, and then a message will appear about the invalid value.

It is necessary that when I enter numbers and click Calculate , standard validation first occurs, and then the script is executed.

PS: in the original script I use jq

    2 answers 2

    you can use the button’s submit event instead of the click event

     function calc() { var a = $('#a').val(); var b = $('#b').val(); var c = a + b; $('#c').val(c); } console.log($('#a').val()); $('#f').submit(function(e) { e.preventDefault(); console.log('submit'); calc(); return false; }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" id="f"> <input id="a" type="number" max="10" required>+ <input id="b" type="number" max="10" required>= <input id="c" type="number" /> <button id='sub' type="submit">Посчитать</button> </form>

    • I didn't have time for 10 seconds ...) - Vasily Barbashev
    • @ Vasily Barbashev, :-D happens :-) so the answer was ready for a long time, just so far, that hasn't been written :) I thought someone would be ahead :) - Grundy
    • Exactly what is needed! Thank! I’ll add that if you want the action to take place (the page isn’t updated) you can add this code to action action = "javascript: 0" - dbellkoff
    • @dbellkoff, uh, no, just do e.preventDefault(); as done in my code. You can make sure of this by running the snippet: there is no update, and there is no action="javascript:0" either - Grundy

    1. Add a form id : <form id="myForm" action="#">

    2. In JavaScript code, check the .checkValidity() form and use event.preventDefault() to prevent the form from being posted to the server.

    3. Do not forget about parseInt() , otherwise you will add lines, not numbers :)

     function calc() { var a = parseInt($('#a').val()); var b = parseInt($('#b').val()); var c = a + b; $('#c').val(c); } $('#sub').click(function(event) { if ($('#myForm')[0].checkValidity()) { calc(); event.preventDefault(); } else { $('#c').val(''); } }) 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myForm" action="#"> <input id="a" type="number" max="10" required>+ <input id="b" type="number" max="10" required>= <input id="c" type="number" /> <button id='sub' type="submit">Посчитать</button> </form>

    https://jsfiddle.net/jgyn2gwv/

    • one
      @Grundy is very rude - without asking, changing someone else's answer, especially when the changes have already been rolled back once. - Dmitry Shevchenko
    • one
      If you can insert a snippet directly without using third-party sites - it’s better to use this opportunity - Grundy
    • one
      Changes that improve the quality of response are always welcome, and links to third-party resources, when you can do without them - no - Grundy
    • one
      The answer is already present all the necessary code. Please do not change my answer anymore. - Dmitry Shevchenko
    • one
      It seems that Grundy did not notice that the same code is already above, so I placed it again. - Nick Volynkin ♦