Form validation button without submitting the form

Question

I have a form, and I want to check validation ( if the inputs are correct) without submitting that form. How is that possible?

The validations in this example is as follows: If the user enters and for first name and jkp for last name and clicks on the validate button, the document.write function will print success without submitting the form.

 $( "#myform" ).submit(function( event ) { var name = $("#fname").val(); var lname = $("#lname").val(); if(name === "and" && lname ==="jkp") {document.write("Correct answer");} else{document.write("Incorrect answer");} }); 

 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="#"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> </select> <input type="submit" value="Submit"> <input style="background:red" type="submit" value="Validate"> </form> 

Answer 1

make validate but not a submit type

Changes i have made:

in js

$( "#vali" ).click(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
 $('#fname, #lname').css({
        'color' : 'red'
    });
 if(name === "and" && lname ==="jkp")
 {alert("Your answers are correct!");}
 else{alert("Your answer is not correct");}
});

in html

<input id="vali" style="background:red" type="button" value="Validate">

DEMO:

 $( "#myform" ).submit(function( event ) { var name = $("#fname").val(); var lname = $("#lname").val(); if(name === "and" && lname ==="jkp") {alert("Your answers are correct!");} else{alert("Your answer is not correct");} }); $( "#vali" ).click(function( event ) { var name = $("#fname").val(); var lname = $("#lname").val(); $('#fname, #lname').css({ 'color' : 'red' }); if(name === "and" && lname ==="jkp") {alert("Your answers are correct!");} else{alert("Your answer is not correct");} }); 

 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } #vali{ width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="#"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> <input type="submit" value="Submit"> <input id="vali" style="background:red" type="button" value="Validate"> </form> 

Answer 2

You can also try AJAX requests supposing you will do the validation on the server side, also hiding the business logic from the client. Another solution is to create a javascript method for validation that is called after focus lost/key up which takes the elements by their id and passes them to this function.

Answer 3

You can simply add event.preventDefault() to the submit event if the validation fails:

 $( "#myform" ).submit(function( event ) { var name = $("#fname").val(); var lname = $("#lname").val(); if(name === "and" && lname ==="jkp") { alert("Success"); } else { event.preventDefault(); alert("failed"); } }); 

 input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; } input[type=submit]:hover { background-color: #45a049; } div { border-radius: 5px; background-color: #f2f2f2; padding: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="myform" action="#"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname" placeholder="Your name.."> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname" placeholder="Your last name.."> </select> <input type="submit" value="Submit"> <input style="background:red" type="submit" value="Validate"> </form> 

Answer 4

Not checked but you can use onchange(), The change event occurs when the value of an element has been changed (only works on input, textarea and select elements). The change() method triggers the change event or attaches a function to run when a change event occurs.

$( "#myform" ).change(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();

 if(name === "and" && lname ==="jkp"){
    alert("Your answers are correct!");
 }
     else{ 
   alert("Your answer is not correct");
   }
}