帮助这个没有运行的jquery脚本

时间：2015-08-15 15:34:12

标签： javascript jquery

我有一个我想要运行的jQuery脚本。如果在按下提交按钮时没有填充文本框，我希望以红色弹出一条消息。我希望此消息弹出到相应的文本框。但是，无论我使用jQuery Script做什么都行不通。

$(document).ready(function() {
  $('#firstname').on('input', function() {
    var input = $(this);
    var is_name = input.val();
    if (is_name) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  $('#lastname').on('input', function() {
    var input = $(this);
    var is_name = input.val();
    if (is_name) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }
  });


  $('#email').on('input', function() {
    var input = $(this);
    var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    var is_email = re.test(input.val());
    if (is_email) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }
  });


  $('#phone').on('input', function() {
    var input = $(this);
    var re = /^[0-9]{10}$/;
    var is_phone = re.test(input.val());
    if (is_phone) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  $('#postcode').keyup(function(event) {
    var input = $(this);
    var re = /^[0-9]{4}$/;
    var is_postcode = re.test(input.val());
    if (is_email) {
      input.removeClass("invalid").addClass("valid");
    } else {
      input.removeClass("valid").addClass("invalid");
    }
  });

  $("submit button").click(function(event) {
    var form_data = $("#contact").serializeArray();
    var error_free = true;
    for (var input in form_data) {
      var element = $("#contact_" + form_data[input]['name']);
      var valid = element.hasClass("valid");
      var error_element = $("span", element.parent());
      if (!valid) {
        error_element.removeClass("error").addClass("error_show");
        error_free = false;
      } else {
        error_element.removeClass("error_show").addClass("error");
      }
    }
    if (!error_free) {
      event.preventDefault();
    } else {
      alert('No errors: Form will be submitted');
    }
  });



});
.error {
  display: none;
  margin-left: 10px;
}
.error_show {
  color: red;
  margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="contact" action="/submit.php" method="post">
  First name *:
  <input type="text" name="firstname" id="firstname"><span class="error">This field is required</span>
  <br/>Last name *:
  <input type="text" name="lastname" id="lastname"><span class="error">This field is required</span>
  <br/>Email *:
  <input type="text" name="lastname" id="email"><span class="error">This field is required</span>
  <br/>Phone Number *:
  <input type="text" name="lastname" id="phone"><span class="error">This field is required</span>
  <br/>Post Code *:
  <input type="text" name="lastname" id="postcode"><span class="error">This field is required</span>
  <br/>
  <input type="checkbox" name="accept" id="accept" id="accept">Please add me to your mailing list *<span class="error">This field is required</span>
  <br/>
  <span>* required fields</span>
  <br/>
  <input type="submit" name="submit" value="submit">
</form>

2 个答案:

答案 0 :(得分：1)

几个问题：

  • HTML中的input元素需要正确设置name属性。目前，几乎所有这些都具有值lastname。
  • click按钮的submit处理程序未正确布局。它需要指向：$("input[type=submit]")。
  • 最后，您的element变量并未真正正确引用任何input字段，因为您为此变量形成值的方式是错误的。它应该是这样的：var element = $("input[name=" + form_data[input]['name'] + "]");。

看一下下面的片段。

代码段：

＆＃13;
＆＃13; 
$(document).ready(function () {
    $('#firstname').on('input', function () {
        var input = $(this);
        var is_name = input.val();
        if (is_name) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });
    $('#lastname').on('input', function () {
        var input = $(this);
        var is_name = input.val();
        if (is_name) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });
    $('#email').on('input', function () {
        var input = $(this);
        var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var is_email = re.test(input.val());
        if (is_email) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });
    $('#phone').on('input', function () {
        var input = $(this);
        var re = /^[0-9]{10}$/;
        var is_phone = re.test(input.val());
        if (is_phone) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });
    $('#postcode').keyup(function (event) {
        var input = $(this);
        var re = /^[0-9]{4}$/;
        var is_postcode = re.test(input.val());
        if (is_email) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });
    $("input[type=submit]").click(function (event) {
        var form_data = $("#contact").serializeArray();
        var error_free = true;
        for (var input in form_data) {
            var element = $("input[name=" + form_data[input]['name'] + "]");
            var valid = element.hasClass("valid");
            var error_element = $("span", element.parent());
            if (!valid) {
                error_element.removeClass("error").addClass("error_show");
                error_free = false;
            } else {
                error_element.removeClass("error_show").addClass("error");
            }
        }
        if (!error_free) {
            event.preventDefault();
        } else {
            alert('No errors: Form will be submitted');
        }
    });
});
＆＃13; 
.error {
    display: none;
    margin-left: 10px;
}
.error_show {
    color: red;
    margin-left: 10px;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="contact" action="/submit.php" method="post">First name *:
    <input type="text" name="firstname" id="firstname" /><span class="error">This field is required</span>
    <br/>Last name *:
    <input type="text" name="lastname" id="lastname" /><span class="error">This field is required</span>
    <br/>Email *:
    <input type="text" name="email" id="email" /><span class="error">This field is required</span>
    <br/>Phone Number *:
    <input type="text" name="phone" id="phone" /><span class="error">This field is required</span>
    <br/>Post Code *:
    <input type="text" name="postcode" id="postcode" /><span class="error">This field is required</span>
    <br/>
    <input type="checkbox" name="accept" id="accept" id="accept" />Please add me to your mailing list *<span class="error">This field is required</span>
    <br/> <span>* required fields</span>
    <br/>
    <input type="submit" name="submit" value="submit" />
</form>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助。

答案 1 :(得分：0)

我被塔希尔击败但是考虑到我在这里写了一半你就去了。

以下是您的代码的工作副本：http://jsfiddle.net/e0wjn5dp/。

需要制作的许多小调整。我会在这里列出它们，如果你需要扩展，请发表评论：

  1. 不是挂钩提交按钮的click事件，而是挂钩到表单的提交事件：

    $("submit button").click(function(event) {}

    变为

    $("#contact").submit(function(event) {}

  2. 在遍历表单字段时，您尝试查找#contact_firstname的ID，然后#contact_lastname，例如，这些不存在。相反，请查找包含相应名称的表单的子项：

    var element=$(this).find("#" + form_data[input]['name']);

  3. 在您的邮政编码关键字事件中，您要检查不存在的if (is_email)，而应该是if (is_postcode)

  4. 使用var error_element = $("span", element.parent());查找错误元素时，将返回所有错误范围。相反，您可以使用next来找到与此字段相关的正确值：

    var error_element=element.next("span")

  5. 由于您的验证工作原理，有必要在“接受”复选框中添加valid类，否则验证将始终失败。我还删除了与复选框关联的错误范围，因为它的性质是任何状态都有效。

    6. 但是老实说，除非你真的想要了解如何编写自己的验证逻辑，或者有特定的理由自己编写，我只需使用jQuery Validation就可以让你做到你想要的只需要很少的努力。

    完整代码：

        $(document).ready(function () {
    $('#firstname').on('input', function () {
        var input = $(this);
        var is_name = input.val();
        if (is_name) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });

    $('#lastname').on('input', function () {
        var input = $(this);
        var is_name = input.val();
        if (is_name) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });


    $('#email').on('input', function () {
        var input = $(this);
        var re = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
        var is_email = re.test(input.val());
        if (is_email) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });


    $('#phone').on('input', function () {
        var input = $(this);
        var re = /^[0-9]{10}$/;
        var is_phone = re.test(input.val());
        if (is_phone) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });

    $('#postcode').keyup(function (event) {
        var input = $(this);
        var re = /^[0-9]{4}$/;
        var is_postcode = re.test(input.val());
        if (is_postcode) {
            input.removeClass("invalid").addClass("valid");
        } else {
            input.removeClass("valid").addClass("invalid");
        }
    });

    $("#contact").submit(function (event) {
        var form_data = $("#contact").serializeArray();
        var error_free = true;
        for (var input in form_data) {
            var element = $(this).find("#" + form_data[input]['name']);
            var valid = element.hasClass("valid");
            var error_element = element.next("span")
            if (!valid) {
                error_element.removeClass("error").addClass("error_show");
                error_free = false;
            } else {
                error_element.removeClass("error_show").addClass("error");
            }
        }
        if (!error_free) {
            event.preventDefault();
        } else {
            alert('No errors: Form will be submitted');
        }
    });



});
相关问题
最新问题