HTML form validation on click of submit button
Question
I am trying to create a HTML form and on my submit button, it must validate if all the fields are filled and then it must append the details to the table displayed below. But while validating the form, i am not able to get why it is adding data to table even if all the details are filled correctly
Below is code in use :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Assignment</title>
<style>
table{
width: 100%;
margin: 25px 0;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #6C220B;
}
table th, table td{
padding: 8px;
text-align: left;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Assignment on Javascript and Jquery:</h1>
<h2>Details form :</h2>
<form action="#" method="post" name="form">
<div class="form-group" required>
<label for="First Name">First Name:</label>
<input type="text" class="form-control" id="fn" placeholder="Enter your first name" name="firstname" required="" >
</div>
<div class="form-group">
<label for="Last Name">Last Name:</label>
<input type="text" class="form-control" id="sn" placeholder="Enter your last name" name="lastname" required="" >
</div>
<div class="form-group">
<label for="Date of birth">Date of birth:</label>
<input type="date" class="form-control" id="dob" placeholder="Enter your date of birth" name="dateofbirth" required="" >
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="em" placeholder="Enter your email id" name="email" required="" >
</div>
<div class="form-group">
<label for="Phone Number">Phone Number:</label>
<input type="text" class="form-control" id="phn" placeholder="Enter your phone number" name="phonenumber" required="" >
</div>
<input type="submit" class="row" value="Click to Add Row">
</form>
<br>
<h2>The table of data :</h2>
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Date of birth</th>
<th>Email</th>
<th>Phone Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>Durai</td>
<td>Saravanan</td>
<td>16/01/1996</td>
<td>durairaj1696@gmail.com</td>
<td>9789879736</td>
</tr>
</tbody>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
function validateForm() {
var isValid = true;
$('.form-group').each(function() {
if ( $(this).val() === '' )
isValid = false;
});
return isValid;
}
$(document).ready(function(){
$(".row").click(function(){
var firstname = $("#fn").val();
var lastname = $("#sn").val();
var dob = $("#dob").val();
var email = $("#em").val();
var phonenumber = $("#phn").val();
var markup = "
<tr>
<td>" + firstname + "</td>
<td>" + lastname + "</td>
<td>" + dob + "</td>
<td>" + email + "</td>
<td>" + phonenumber + "</td>
</tr>";
if(validateForm())
{
$("table tbody").append(markup);
}
});
});
</script>
</body>
</html>
3 answers
solution1
0 ACCPTED 2018-09-28 07:39:46
I have modified the jQuery a little.
- value of input fields are validated
- form is no longer submitted when button is clicked on
- data is added to the table at the right place
function validateForm() { var isValid = true; $('.form-group input').each(function() { //console.log($(this).val()); if ($(this).val() === '') isValid = false; }); return isValid; } $(document).ready(function() { $(".row").click(function() { var firstname = $("#fn").val(); var lastname = $("#sn").val(); var dob = $("#dob").val(); var email = $("#em").val(); var phonenumber = $("#phn").val(); var markup = "<tr><td>" + firstname + "</td><td>" + lastname + "</td><td >" + dob + "</td><td>" + email + "</td><td>" + phonenumber + "</td></tr>"; if (validateForm()) { $('.table tr:last').after(markup); /* Changed */ } return false; /* Do not submit the form */ }); });
table { width: 100%; margin: 25px 0; border-collapse: collapse; } table, th, td { border: 1px solid #6C220B; } table th, table td { padding: 8px; text-align: left; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="container"> <h1>Assignment on Javascript and Jquery:</h1> <h2>Details form :</h2> <form action="#" method="post" name="form"> <div class="form-group" required> <label for="First Name">First Name:</label> <input type="text" class="form-control" id="fn" placeholder="Enter your first name" name="firstname" required=""> </div> <div class="form-group"> <label for="Last Name">Last Name:</label> <input type="text" class="form-control" id="sn" placeholder="Enter your last name" name="lastname" required=""> </div> <div class="form-group"> <label for="Date of birth">Date of birth:</label> <input type="date" class="form-control" id="dob" placeholder="Enter your date of birth" name="dateofbirth" required=""> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="em" placeholder="Enter your email id" name="email" required=""> </div> <div class="form-group"> <label for="Phone Number">Phone Number:</label> <input type="text" class="form-control" id="phn" placeholder="Enter your phone number" name="phonenumber" required=""> </div> <input type="submit" class="row" value="Click to Add Row"> </form> <br> <h2>The table of data :</h2> <table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Date of birth</th> <th>Email</th> <th>Phone Number</th> </tr> </thead> <tbody> <tr> <td>Durai</td> <td>Saravanan</td> <td>16/01/1996</td> <td>durairaj1696@gmail.com</td> <td>9789879736</td> </tr> </tbody> </table> </div>
solution2
0 2018-09-28 07:42:55
When you submit form web page is reload. If you stop this event your code starting work. Just add param in your form: onsubmit="return false;"
<form action="#" method="post" name="form" onsubmit="return false;">{content}
solution3
0 2018-09-28 07:57:44
You have added submit type button that why it will not adding form data to your table, If you change type as button so it will works,
<input type="button" class="row" value="Click to Add Row">
The required attribute works with only submit button so required validation you have to add manually from javascript.
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.
Related Question
Validation of input on click submit button in a form
Disable submit button on click after form validation
HTML5 form validation without submit button
bootstrap html click button without submit form
Prevent form submission when validation fails on submit button click
Submit form by click on button
HTML5 form validation without submit button with custom error message
Trigger standard HTML5 validation (form) without using submit button?
Disable button on form submit, without preventing HTML5 validation
validation is not done on submit button click
Related Tags