在jQuery表单验证中苦苦挣扎

时间:2017-07-14 21:40:53

标签: jquery twitter-bootstrap validation

我正在创建一个非常简单的注册表单,只有两个输入和提交按钮 我遇到的问题是它只会完成一个if语句。

这是我制作的jQuery:

$("#usernameError").hide();
$("#passwordError").hide();

$("#registrationSubmit").click(function(){

  if($("#username").val() == ""){

    $("#usernameError").show();
    return false;
  }

  if($("#passwordReg").val() == ""){

    $("#passwordError").show();
    return false;
  }
});

这是使用bootstrap的HTML:

<div class="modal fade" id="add-admin-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header admin">
         Please Enter Details
      </div>
      <div class="modal-body admin">
        <form id="registrationForm" action="registerAction.php" method="post">
          <div class="form-group">
            <label for="">Username</label>
            <input name="username" type="username" class="form-control" id="username" aria-describedby="emailHelp" placeholder="Enter Username">
            <div id="usernameError" class="alert alert-danger pad" role="alert">A Username is required!</div>
          </div>
          <div class="form-group">
            <label for="password">Password</label>
            <input name="password" type="password" class="form-control" id="passwordReg" placeholder="Password">
            <div id="passwordError" class="alert alert-danger pad" role="alert">A Password is required!</div>
          </div>

          <div class="form-group">
            <button type="submit" id="registrationSubmit" name="registrationSubmit" class="btn btn-success">Ok</button>
            <button class="btn btn-default" data-dismiss="modal">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script src="validations.js"></script>

该脚本将验证用户名并显示错误,但不对密码执行任何操作。

是因为我使用return false来阻止提交表单吗? 我可以用什么呢?

2 个答案:

答案 0 :(得分:1)

是的,这就是原因,删除return语句。您可以使用布尔变量errorOccurred并在出现错误时将其设置为true。在某个地方你有一个post函数,如果发生错误就不会发布数据。

答案 1 :(得分:0)

您要退回代码。如果要在

之后执行代码,请不要这样做
var ValidationFailed = false;

if($("#username").val() == ""){

    $("#usernameError").show();
    ValidationFailed = true;
}

if($("#passwordReg").val() == ""){

    $("#passwordError").show();
    ValidationFailed = true;

}
//.....

return ValidationFailed;