Question

我有一个表单，我正在尝试检查两个文本字段是否为空。如果有空，那么做一个警告否则继续submition但我的代码不工作.. 有什么建议吗？

不幸的是，我必须使用此方法，而不是使用ajax。

<style>
.highlight{
backgound-color: #F00;  
}
</style>

<script>
$(document).ready(function(){
$("#register-form").submit(function(){
    var isFormValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("highlight");
            isFormValid = false;
        }
        else{
            $(this).removeClass("highlight");
        }
    });

    if (!isFormValid) alert("Please fill in all the required fields (indicated by *)");

    return isFormValid;
});
});
</script>

在体内：

<form id="register-form" name="register-form" method="post" action="register.php">
  <p>
    <label for="usenrame"></label>
    <input type="text" name="usenrame" id="usenrame" class="required input" />
  </p>
  <p>
    <label for="passwor"></label>
    <input type="text" name="passwor" id="passwor" class="required input" />
  </p>
  <p>
    <input type="submit" name="submit" id="submit" value="Submit" />
  </p>
</form>

Answer 1

这一行

$(".required input").each(function(){

你犯了错误

$("input.required").each(function(){

使用此...

Answer 2

尝试使用：

$("#register-form .required").each(function(){

而不是

$(".required input").each(function(){

这将确保您的jQuery选择器不会侵占其他<forms>中的其他输入。

Answer 3

您的选择器似乎有误。目前，您的选择器正在选择具有<input />类的元素内的.required元素。这与你的标记不符。

您可以使用类<input />定位.required元素，如下所示：

$('input.required')...

或者使用<input />和.input类定位.required元素，如下所示：

$('.required.input')...

Answer 4

您在选择器中犯了错误。

要么是：

$(".required.input").each(function(){

因为它处于同一水平

否则需要

$("input.required").each(function(){

根据您的代码，您正在寻找input类

中的子标记.required

如果您计划将来使用.required框或select，我建议您单独使用textarea。所有情况都可以使用相同的选择器。

DEMO

签入输入为空，然后继续提交

4 个答案: