时间戳

首页 > 解决方案 > 单击提交按钮时的 HTML 表单验证

javascript - 单击提交按钮时的 HTML 表单验证

问题描述

我正在尝试创建一个 HTML 表单，在我的提交按钮上，它必须验证是否所有字段都已填写，然后它必须将详细信息附加到下面显示的表格中。但是在验证表单时，即使正确填写了所有详细信息，我也无法理解为什么它将数据添加到表中

以下是使用中的代码：

<!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>

标签： javascriptjquerycsshtml

解决方案

我对 jQuery 做了一些修改。

  • 验证输入字段的值
  • 单击按钮时不再提交表单
  • 数据被添加到表的正确位置

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>

推荐阅读