In this tutorial we will do dynamic form validation using jquery and javascript, by the help of this you no longer have to write code for each of the fields while submitting the form.
This type of validation is generally performed when you are trying to go to different page after entering some data into the form and system will prompt saying “Some data may not be submitted do you still want to proceed?” type of messages.
So today we are going to do same sort of validation using jquery and javascript.
Lets get started :-
Prepare a demo html page with a form.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<div class="contaienr"> <div class="row" style="margin-top: 30px;"> <div class="col-md-5 col-sm-offset-3"> <form action="" onsubmit="return checkData()" name="myform"> <div class="form-group"> <input type="text" id="" name="name" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name1" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name2" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name3" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name4" class="form-control" /> </div> <div class="form-group"> <button class="btn btn-primary btn-sm">Send Button</button> </div> </form> </div> </div> </div> |
Now some javascript code,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
function checkData() { event.preventDefault(); var fields = ["name", "name1", "name2", "name3", "name4"]; var i, l = fields.length; var fieldname; var not_empty_check = ''; for (i = 0; i < l; i++) { fieldname = fields[i]; if (document.forms["myform"][fieldname].value != "") { not_empty_check = 1; } } if(not_empty_check <= 1) { alert("fields are missing"); } return false; } |
If you are still confused, why dont you have full code to more clear on what we have done here,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Dynamic Javascript and jQuery Validaton Demo</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> </head> <body> <div class="contaienr"> <div class="row" style="margin-top: 30px;"> <div class="col-md-5 col-sm-offset-3"> <form action="" onsubmit="return checkData()" name="myform"> <div class="form-group"> <input type="text" id="" name="name" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name1" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name2" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name3" class="form-control" /> </div> <div class="form-group"> <input type="text" id="" name="name4" class="form-control" /> </div> <div class="form-group"> <button class="btn btn-primary btn-sm">Send Button</button> </div> </form> </div> </div> </div> <!-- jQuery --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> <script> function checkData() { event.preventDefault(); var fields = ["name", "name1", "name2", "name3", "name4"]; var i, l = fields.length; var fieldname; var not_empty_check = ''; for (i = 0; i < l; i++) { fieldname = fields[i]; if (document.forms["myform"][fieldname].value != "") { not_empty_check = 1; } } if(not_empty_check <= 1) { alert("fields are missing"); } return false; } </script> </body> </html> |
Leave a Reply