Проверка формы HTML при нажатии кнопки «Отправить» - PullRequest
Новая
       1

Проверка формы HTML при нажатии кнопки «Отправить»

0 голосов
/ 28 сентября 2018

Я пытаюсь создать форму 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>

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

При отправке формы веб-страница перезагружается.Если вы остановите это событие, ваш код начнет работать.Просто добавьте параметр в вашей форме: onsubmit="return false;"

<form action="#" method="post" name="form" onsubmit="return false;">{content}

0 голосов
/ 28 сентября 2018

Вы добавили кнопку отправки типа, поэтому она не будет добавлять данные формы в вашу таблицу. Если вы измените тип на кнопку, чтобы она работала,

<input type="button" class="row" value="Click to Add Row">

Обязательный атрибутработает только с кнопкой отправки, поэтому необходимую проверку необходимо добавить вручную из JavaScript.

0 голосов
/ 28 сентября 2018

Я немного изменил 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...