JS - 检查表格是否填写完整

-1

我想帮助我的表格。目前，当用户提交表单时，表单会自动提交（到main.php中）。我想在提交之前进行预先检查，看看表格是否已完整填写。JS - 检查表格是否填写完整

这里是我的HTML表单：

<div id="reqForm" class="modal"> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <span class="close">&times;</span> 
        <h2>Reimbersement Form</h2> 
       </div> 
       <div class="modal-body"> 
        <div class="form"> 
         <h2>Enter your information:</h2> 
         <br/> 
         <h3> 
         <form action="main" method="post" id="newRequest"> 
          <label>Full Name:</label> <input type="text" name="name" value="<?php echo $name; ?>" disabled/><br /> 

          <label>Reimberse Amount:</label> <input type="number" min="0" name="amount" /><br /> 
          Customer Name: <select name="customerName" id="cN"><option value="" id='cPlSe' selected>--Select--</option><?php 
          echo $optionC; 
          ?></select><br />Project Name: <select name="projectName" id="pN"><option value="" id='plSe' selected>Please select customer name </option><option value="">--Select--</option><?php 
          echo $optionP; 
          ?></select><br /> 
          <label>Reason (max length 255 characters): </label><br /><textarea cols="40" rows="1" form="newRequest" name="reason"></textarea><br /> 
          <input type="hidden" name="submitted"/> 

         </h3> 
        </div> 
       </div> 
       <div class="modal-footer"><br /> 
        <input type="submit" id="submit"/> 
        </form> 
       </div> 
       </div> 
      </div>

和我的PHP：

if(isset($_POST["submitted"])){ 
        $name = $_SESSION["name"]; 
        $amount = $_POST["amount"]; 
        $projectName = $_POST["projectName"]; 
        $customerName = $_POST["customerName"]; 
        $reason = $_POST["reason"]; 
        $d = array("name"=>$name,"amount"=>$amount,"projectName"=>$projectName,"customerName"=>$customerName,"reason"=>$reason); 

        foreach($d as $i) { 
         if("" == trim($i)) { 
          echo "Make sure you have filled out all the fields. Click <a href='main'>here</a> to go back."; 
          exit(); 
         } 
        } 


        foreach($d as $i) { 
         mysqli_real_escape_string($connect, $i); 
        } 
        $name = $d["name"]; 
        $amount = $d["amount"]; 
        $projectName = $d["projectName"]; 
        $customerName = $d["customerName"]; 
        $reason = $d["reason"]; 

        $query = "INSERT INTO `requests` (`Name`, `Amount`, `ProjectName`, `CustomerName`, `Reason`) VALUES " . "('" . $name . "', '" . $amount . "', '" . $projectName . "', '" . $customerName . "', '" . $reason."');"; 

        if (mysqli_query($connect, $query)) { 
         echo "Success!"; 
        } else { 
         echo "Error: " . $query . "<br>" . mysqli_error($connect); 
        } 
       }

注：我使用的形式模式在https://www.w3schools.com/howto/howto_css_modals.asp

来源

2017-08-04 Moon

你可以把所有的项目都必须填写加入HTML标记“要求”所有的输入字段。然而，如果你必须使用JavaScript，你可以尝试这样的：https://stackoverflow.com/questions/3279628/checking-the-form-field-values-before-submitting-that-page – Sushil

你有无效的HTML标记〜'h3'标签对跨越表格（一个在外面，另一个在里面） – RamRaider

<input required></input>

看到

你可以使用输入标签的'required'attr

来源

2017-08-04 05:55:37 Ryan

嗨，如果你可以使用第三方库，我建议使用parsleyJs。有了这个，你可以使用

$('form').parsley().validate() 来检查表单是否有效。

如果你想查看是否一切都充满你需要使用required标签，你也可以使用其他类型和标签 https://www.w3schools.com/html/html_form_input_types.asp

来源

2017-08-04 05:58:14

JS - 检查表格是否填写完整

回答

相关问题