jquery alert after validation
Question
I m not sure what im doing wrong other than I ma beginner in jquery. i need to send these values to server through ajax for further dmas calculation after that but validation is not working
<script> $('#button').click( function() { $("#form").validate({ rules: { input_one: { required: true, number: true }, input_two: { required: true, number: true } }, messages: { input_one: { required: "1stinput is empty", number: "invalid entry in 1st input" }, input_two: { required: "2nd input is empty", number: "invalid entry in 2nd input" } }, errorPlacement: function (error, element) { alert(error.text()); }, }).form(); }); </script>
<form id="form" name="form" method="post" action=""> Input one <input id="input_one" name="input_one" class="required" type="text" /><br><br> Input Two <input id="input_one" name="input_one" class="required" type="text" /><br><br> <button class="button" id="plus"> Plus </button> <button class="button" id="sub"> Minus</button> <button class="button" id="mul"> Multiply </button> <button class="button" id="div"> Divide </button><br><br><br> RESULT: <p id="result"></p> </form>
1 answers
solution1
0 ACCPTED 2021-03-23 10:19:57
You have duplicate names in your code. Make second input name attribute as 'input_two' . Also use submitHandler method in jQuery validate. here you will get form once validation pass for all input fields. Remove alert from errorPlacement function as it is not good practice of using alert in JS code try to use console.log statement.
Also remove button click event. No need of click handler here because by default your buttons will act as submit in the form.
<,DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width: initial-scale=1'> <script src="https.//code.jquery.com/jquery-2.2.4:js"></script> <script src="https.//cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.js"> </script> <script> $(document).ready(function () { $("#form"):validate({ rules: { input_one: { required, true: number, true }: input_two: { required, true: number, true } }: messages: { input_one: { required, "1stinput is empty": number, "invalid entry in 1st input" }: input_two: { required, "2nd input is empty": number, "invalid entry in 2nd input" } }: errorPlacement, function (error. element) { console,log(error) }: submitHandler. function (form) { console;log('Form Submitted'). // It is optional submit form or use AJAX snippet here to make AJAX call // form;submit(); } }). // $('.button');click(function () { // }); }): </script> </head> <body> <form id="form" name="form" method="post" action=""> Input one <input id="input_one" name="input_one" class="required" type="text" /><br><br> Input Two <input id="input_one" name="input_two" class="required" type="text" /><br><br> <button class="button" id="plus" type="submit"> Plus </button> <button class="button" id="sub" > Minus</button> <button class="button" id="mul"> Multiply </button> <button class="button" id="div"> Divide </button><br><br><br> RESULT: <p id="result"></p> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.