Question

我正在制作表格，但在验证表格时遇到了一些问题。

HTML：

<form id="regForm" class="form-group" method="POST" action="signup.php">
  <div class="col-md-12">
    <h2>Job Pocket</h2>
  </div>
  <div class="col-md-12">
    <input placeholder="email" class="form-control"type="text" name="email" id="email">
  </div>
  <div class="col-md-12">
    <input placeholder="password"  class="form-control" type="password" name="password" id="pass">
  </div>
  <div class="col-md-12">
    <input placeholder="confirm password"  class="form-control" type="password" name="confirmpass" id="confirmpass">
  </div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <input placeholder="first name"  class="form-control" type="text" name="first_name" id="first_name">
      </div>
      <div class="col-md-6">
        <input placeholder="last name"  class="form-control" type="text" name="last_name" id="last_name">
      </div>
    </div>
  </div>
  <div class="col-md-12">
    <input type="submit"  value="submit" name="submitsignup" id="submit" class="btn btn-primary">
  </div>
  <hr>
</form>

Javascript：

<script type="text/javascript">
    $("#regForm").submit(function(event){
        if(document.getElementById("email")=="" || document.getElementById("password") || document.getElementById("last_name") || document.getElementById("first_name"))
        return false;
    });
</script>

即使添加了此javascript代码，表单仍会提交到signup.php。而且我也应该在php中添加外部检查。

Answer 1

以此替换您的代码

if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")

Answer 2

您忘记添加.value来检查输入值。另外，您还必须在Submit函数中使用preventDefault来阻止表单提交：

<script type="text/javascript">
$("#regForm").submit(function(event){
    if(document.getElementById("email").value == "" || document.getElementById("password").value == "" || document.getElementById("last_name").value == "" || document.getElementById("first_name").value == "")
    event.preventDefault();
});
</script>

由于使用的是jquery，因此还可以使用其选择器：

<script type="text/javascript">
$("#regForm").submit(function(event){
    if($("#email").val() == "" || $("#password").val() == "" || $("#last_name").val() == "" || $("#first_name").val() == "")
    event.preventDefault();
});
</script>

Answer 3

您应仅在标记的html标记中添加“必需”。它将自动添加显示文本，该字段是必填字段。像这样：

<input placeholder="last name"  class="form-control" type="text" name="last_name" id="last_name" required>

Answer 4

//在其上添加返回功能

<form id="regForm" class="form-group" method="POST" action="signup.php">
                            <div class="col-md-12">
                                    <h2>Job Pocket</h2>
                            </div>
                            <div class="col-md-12">
                                <input placeholder="email" class="form-control"type="text" name="email" id="email">
                            </div>
                            <div class="col-md-12">
                                <input placeholder="password"  class="form-control" type="password" name="password" id="pass">
                            </div>
                            <div class="col-md-12">
                                <input placeholder="confirm password"  class="form-control" type="password" name="confirmpass" id="confirmpass">
                            </div>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input placeholder="first name"  class="form-control" type="text" name="first_name" id="first_name">
                                    </div>
                                    <div class="col-md-6">
                                        <input placeholder="last name"  class="form-control" type="text" name="last_name" id="last_name">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <input type="button"  onclick="return validation()" value="submit" name="submitsignup" id="submit" class="btn btn-primary">
                            </div>
                            <hr>
                        </form>




<script>
public  function validation(){
  if(document.getElementById("email").value=="" || document.getElementById("password").value="" || document.getElementById("last_name").value="" || document.getElementById("first_name")).value==""{
        return false; }
else {
    document.getElementById("regForm").submit();
}
}
</script>

或使用

//输入时需要添加，它将自动返回消息

<form id="regForm" class="form-group" method="POST" action="signup.php">
                            <div class="col-md-12">
                                    <h2>Job Pocket</h2>
                            </div>
                            <div class="col-md-12">
                                <input placeholder="email" class="form-control"type="text" name="email" id="email" required>
                            </div>
                            <div class="col-md-12">
                                <input placeholder="password"  class="form-control" type="password" name="password" id="pass" required>
                            </div>
                            <div class="col-md-12">
                                <input placeholder="confirm password"  class="form-control" type="password" name="confirmpass" id="confirmpass" required>
                            </div>
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input placeholder="first name"  class="form-control" type="text" name="first_name" id="first_name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input placeholder="last name"  class="form-control" type="text" name="last_name" id="last_name" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <input type="submit"   value="submit" name="submitsignup" id="submit" class="btn btn-primary">
                            </div>
                            <hr>
                        </form>

Answer 5

像这样使用event.preventDefault（）会怎样：

    <script type="text/javascript">
    $("#regForm").submit(function(event){
event.preventDefault();
        if(document.getElementById("email")=="" || document.getElementById("password")=="" || document.getElementById("last_name")=="" || document.getElementById("first_name")=="")
        return false;
    });
</script>

阻止表单提交直到验证

5 个答案: