如何在只填写必填字段之前禁用提交

How to disable submit till only required fields are filled up

本文关键字：提交 字段      更新时间：2023-09-26

我已经搜索过了，但我得到了关于如何禁用提交按钮直到all fields完成的信息。。。。

我有下面的表格，其中一些字段是required，一些是optional。

我想禁用提交按钮，直到required字段完成

表单示例代码：

<form name="registration_form" id="registration_form" action="nextaction.php" method="post" enctype="multipart/form-data" >
Name : <input type="text" id="name" name="name" required>
Email : <input type="text" id="name" name="name" required>
Mobile : <input type="text" id="mobile" name="mobile" required>
Gender : <input type="text" id="gender" name="gender" >/*optional*/
Occupation : <input type="text" id="occupation" name="occupation" >/*optional*/
City : <input type="text" id="city" name="city" required>
Avatar : <input type="file" id="avatar" name="avatar" required>
<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" />

================

已编辑

我尝试的提交禁用，直到所有字段完成如下：

第一件事：

<input type="submit" class="link-button-blue" id="register" value="PROCEED TO NEXT STEP" disabled="disabled" />

脚本：

   <script>
    $(document).ready(function (){
    $('form > input').keyup(function() {
     var empty = false;
      $('form > input').each(function() {
        if ($(this).val() == '') {
            empty = true;
        }
     });
      if (empty) {
         $('#register').attr('disabled', 'disabled');
      } else {
         $('#register').removeAttr('disabled'); 
      }
   });
});        
</script>

$('#registration_form input[required]').on('input propertychange paste change', function() {
  var empty = $('#registration_form').find('input[required]').filter(function() {
    return this.value == '';
  });
  $('#register').prop('disabled', (empty.length));
});

https://jsfiddle.net/ot5kn5c7/

这应该行得通。

任何时候，在任何必需输入上发生任何更改时，都要检查非空的必需字段的计数。一旦有0个必需的空输入，更新按钮的禁用属性。（0评估为假）

如果你不想禁用该按钮，只想阻止表单提交，你会附加到表单上的提交事件，并使用类似的逻辑检查长度来阻止默认操作。

$('form').on('submit', function(e) {
  var empty = $(this).find('input[required]').filter(function() {
    return this.value == '';
  });
  if (empty.length) {
    e.preventDefault();
    alert('enter all required field!')
  }
});

适用于您的案例的工作解决方案：https://jsfiddle.net/j9r5ejho/

$('form').submit(function(){
 var valid = true;
 $('input[required]').each(function(i, el){
    if(valid && $(el).val()=='' ) valid = false; 
 })
return valid;
})

未测试，但它应该与以下内容一起工作：

(function() {
    // whenever you type in a field
    $('form > input').keyup(function() {
        var empty = false;
        // scan all fields in this form with the attribute required
        $('form').find('input[required]').each(function() {
            // if it's empty, cancel the loop
            if ($(this).val() == '') {
                empty = true;
                return false;
            }
        });
        // in case we have an empty required field, 
        // disable submit button
        if (empty) {
            $('input:submit').attr('disabled', 'disabled');
        } else {
            $('#register').removeAttr('disabled');
        }
    });
})();

为了防止在button或input type="submit"上发布表单，您可以简单地使用e.preventDefault()，这将阻止继续执行默认行为。如果您使用的是jquery validation，并且具有required属性，则只需调用$.validate()即可验证表单。

$('input:submit').click(function(e)
{
 if(!$.validate())
  e.preventDefault();
});

示例：https://jsfiddle.net/DinoMyte/suj951ga/1/

以防万一你想尝试这样的东西。这不会禁用提交按钮，但如果你想在填写完所有必填字段之前停止提交，这应该可以。

不确定你使用的是什么数据库，但这是为PDO准备的。您可以将连接部分更改为mysqli。

  • 在您完成所有必填字段之前，它不会提交到您的数据库，并且还会显示所需的输入错误消息

  • 如果你忘记填写一个必填字段并提交，它不会清除所有字段。

     <?php
 // define variables and set to empty values
   $nameErr = $emailErr = $cityErr = $commentErr = $genderErr = "";
   $name = $email = $city = $comment = $gender = "";
  if ($_SERVER["REQUEST_METHOD"] == "POST") {
   if (empty($_POST["name"])) {
     $nameErr = "Please add a name";
  } else {
      $name = validateInput($_POST["name"]);
      // check if name only contains letters and whitespace
      if (!preg_match("/^[a-zA-Z ]+/",$name)) {$nameErr = "Only letters and white 
      space allowed";} 
    }
  if (empty($_POST["email"])) {
    $emailErr = "Please add an email";
  } else {
     $email = validateInput($_POST["email"]);
     // check if email is an email format
      if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $emailErr = "Invalid email format";
      }
    }
 if (empty($_POST["city"])) {
    $cityErr = "Please add your city";
  } else {
    $city = validateInput($_POST["city"]);
    // check if city only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$city)) {
        $cityErr = "Only letters and white space allowed";
    }
  }
  if (empty($_POST["comment"])) {
    $commentErr = "Please add your comment";
  } else {
    $comment = validateInput($_POST["comment"]);
       // check if comment only contains letters and whitespace
       if (!preg_match("/^[a-zA-Z ]*$/",$comment)) {
        $commentErr = 'Only "/", "-", "+", and numbers';  
    }
  }
  if (empty($_POST["gender"])) {
    $genderErr = "Please pick your gender";
  } else {
    $gender = validateInput($_POST["gender"]);
    }
}
// Validate Form Data 
function validateInput($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }

if(!empty($_POST["name"]) && !empty($_POST["email"]) && !empty($_POST["city"]) && !empty($_POST["comment"]) && !empty($_POST["gender"]))
  {
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "myDBPDO";
  try {
      $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
      // set the PDO error mode to exception
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $sql = "INSERT INTO info (name, email, city, comment, gender)
      VALUES ('$name', '$email', '$city', '$comment', '$gender')";
      // use exec() because no results are returned
      $conn->exec($sql);
      echo "Success! Form Submitted!";
      }
  catch(PDOException $e)
      {
      echo $sql . "<br>" . $e->getMessage();
      }
  $conn = null;
}
?>
<!DOCTYPE HTML> 
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body> 


<h2>PHP Form</h2>
<p>Doesn't submit until the required fields you want are filled</p>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
  <div class="error">
    <p><span>* required field</span></p>
    <div><?php echo $nameErr;?></div>
    <div><?php echo $emailErr;?></div>
    <div><?php echo $cityErr;?></div>
    <div><?php echo $commentErr;?></div>
    <div><?php echo $genderErr;?></div>              
  </div>
    <label for="name">Name:
      <input type="text" name="name" id="name" placeholder="" value="<?php echo $name;?>">
        <span class="error">*</span>
    </label>
    <label for="email">Email:
      <input type="email" name="email" id="email" placeholder="" value="<?php echo $email;?>">
        <span class="error">*</span>
    </label>
    <label for="city">city:
      <input type="text" name="city" id="city" placeholder="" value="<?php echo $city;?>">
        <span class="error">*</span>
    </label>
    <label for="comment">comment:
      <input type="text" name="comment" id="comment" value="<?php echo $comment;?>">
        <span class="error">*</span>
    </label>
    <label for="gender">Gender:<br>
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other  
        <span class="error">*</span>
    </label>
   <input type="submit" name="submit" value="Submit"> 
</form>
</body>
</html>

如果你想将其重定向到另一个页面，这样如果他们刷新表单，它就不会再次将表单发送到你的PDO数据库，请使用此选项。

  • 它不会提交到您的数据库，并将保留在HOME.PHP页面上，直到您完成所有必需的字段，并且在HOME_PHP页面上还会显示所需的输入错误消息
  • 如果你忘记填写一个必填字段并提交，它不会清除所有字段

在"$conn->exec（$sql）；"之后添加了一个"header（"Location:welcome.php"）；"

HOME.PHP

<?php
// define variables and set to empty values
$nameErr = $emailErr = $cityErr = $commentErr = $genderErr = "";
$name = $email = $city = $comment = $gender = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Please add a name";
  } else {
    $name = validateInput($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]+/",$name)) {$nameErr = "Only letters and white space allowed";} 
    }
  if (empty($_POST["email"])) {
    $emailErr = "Please add an email";
  } else {
    $email = validateInput($_POST["email"]);
    // check if email is an email format
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)){
        $emailErr = "Invalid email format";
    }
  }
  if (empty($_POST["city"])) {
    $cityErr = "Please add your city";
  } else {
    $city = validateInput($_POST["city"]);
    // check if city only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$city)) {
        $cityErr = "Only letters and white space allowed";
    }
  }
  if (empty($_POST["comment"])) {
    $commentErr = "Please add your comment";
  } else {
    $comment = validateInput($_POST["comment"]);
       // check if comment only contains letters and whitespace
       if (!preg_match("/^[a-zA-Z ]*$/",$comment)) {
        $commentErr = 'Only "/", "-", "+", and numbers';  
    }
  }
  if (empty($_POST["gender"])) {
    $genderErr = "Please pick your gender";
  } else {
    $gender = validateInput($_POST["gender"]);
    }
}
// Validate Form Data 
function validateInput($data) {
    $data = trim($data);
    $data = stripslashes($data);
    $data = htmlspecialchars($data);
    return $data;
  }

if(!empty($_POST["name"]) && !empty($_POST["email"]) && !empty($_POST["city"]) && !empty($_POST["comment"]) && !empty($_POST["gender"]))
  {
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "myDBPDO";
  try {
      $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
      // set the PDO error mode to exception
      $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
      $sql = "INSERT INTO info (name, email, city, comment, gender)
      VALUES ('$name', '$email', '$city', '$comment', '$gender')";
      // use exec() because no results are returned
      $conn->exec($sql);
      header("Location: welcome.php");
      }
  catch(PDOException $e)
      {
      echo $sql . "<br>" . $e->getMessage();
      }
  $conn = null;
}
?>
<!DOCTYPE HTML> 
<html>
<head>
<style>
.error {color: #FF0000;}
</style>
</head>
<body> 


<h2>PHP Form</h2>
<p>Doesn't submit until the required fields you want are filled</p>

<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
  <div class="error">
    <p><span>* required field</span></p>
    <div><?php echo $nameErr;?></div>
    <div><?php echo $emailErr;?></div>
    <div><?php echo $cityErr;?></div>
    <div><?php echo $commentErr;?></div>
    <div><?php echo $genderErr;?></div>              
  </div>
    <label for="name">Name:
      <input type="text" name="name" id="name" placeholder="" value="<?php echo $name;?>">
        <span class="error">*</span>
    </label>
    <label for="email">Email:
      <input type="email" name="email" id="email" placeholder="" value="<?php echo $email;?>">
        <span class="error">*</span>
    </label>
    <label for="city">city:
      <input type="text" name="city" id="city" placeholder="" value="<?php echo $city;?>">
       <span class="error">*</span>
    </label>
    <label for="comment">comment:
      <input type="text" name="comment" id="comment" value="<?php echo $comment;?>">
        <span class="error">*</span>
    </label>
    <label for="gender">Gender:<br>
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="female") echo "checked";?> value="female">Female
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="male") echo "checked";?> value="male">Male
      <input type="radio" name="gender" <?php if (isset($gender) && $gender=="other") echo "checked";?> value="other">Other  
        <span class="error">*</span>
    </label>
   <input type="submit" name="submit" value="Submit"> 
</form>
</body>
</html>

欢迎。PHP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=', initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>Success! Form Submitted!</h1>
    <script type="text/javascript" src="js/main.js" ></script>
</body>
</html>
相关文章：