JavaScript 验证和 cookie

Question

我目前在 JavaScript class，我的最后一项任务是编写代码来验证预订申请表并创建 cookie。我在作业中得到了一半的分数，因为我的代码没有 100% 正确地工作，我知道情况就是这样。代码中发生的事情是当我刷新页面而不将信息放入文本框时，它对我大喊说 "this information is required"，但是当我填写一些必填信息并将其余部分留空时，它仍然会转到"thank you for your request" 页。

这是我的 javascript 代码：

$(document).ready(function() {
var emailPattern = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b/;   
$(":text, #arrival_date, #nights, #name, #email, #phone").after("<span class='error'>*</span>");
$("#reservation_form").submit(
    function(event) {
        var isValid = true;
            $("#arrival_date").focus();
        // validate the requested arrival date
            if ($("#arrival_date").val() == "") {
                $("#arrival_date").next().text("This field is required.");
                isValid = false;
            } 
            else {
                //                       store arrival date in cookie   wds 7/13/2013
                setCookie("guestdate",$("#arrival_date").val(),365);
                $("#arrival_date").next().text(""); 
            }
            // validate the requested arrival nights
            if ($("#nights").val() == "") {
                $("#nights").next().text("This field is required.");
                isValid = false;
            } 
            else {
                setCookie("guestnights",$("#nights").val(),365);
                $("#nights").next().text(""); 
            }
            // validate the requested name
            if ($("#name").val() == "") {
                $("#name").next().text("This field is required.");
                isValid = false;
            }
            else {
                setCookie("guestname",$("#name").val(),365);
                $("#name").next().text("");
            }
            // validate the requested email
            if ($("#email").val() == "") {
                $("#email").next().text("This field is required.");
                isValid = false;
            }
            else {
                setCookie("guestemail",$("#email").val(),365);
                $("#email").next().text("");
            }
            // validate the requested phone number
            if ($("#phone").val() == "") {
                $("#phone").next().text("This field is required.");
                isValid = false;
            }
            else {
                setCookie("guestphone",$("#phone").val(),365);
                $("#phone").next().text("");
            }
            if (isValid == false) {
            event.preventDefault(); 
            }
    } // end function
); // end submit
}); // end ready

我的教授从来没有告诉我我做错了什么，下周我还有另一个与此非常相似的作业。她在我的反馈中只说了 "I see validation code but when I run the program none of it works"。她也没有 post 作业后的答案，这令人沮丧。任何帮助都会很棒！

Answer 1

检查此更新 fiddle。 https://jsfiddle.net/xjr3ro6k/4/ 使用 jquery 验证插件时，您可以将规则传递给表单选择器验证方法，如下所示：

$( "#reservation_form" ).validate({
  rules: {
    field: {
      required: true
    }
  }
});

或者您可以简单地在该特定标记中添加 required 和运行将验证方法添加到表单选择器，如本例 http://jqueryvalidation.org/files/demo/ 您可以浏览这些演示并了解有关此插件的更多信息。

继续学习。

JavaScript 验证和 cookie

JavaScript validation and cookies

javascript

cookies

validation

jquery