Question

我编写了自定义jquery验证脚本来验证表单中的字段（所有这些都是必需的，但代码的结构方式是逐个验证字段而不是一次验证（当提交按钮是点击）。代码如下：

    $('#contactForm').submit(function () {      

        $(".error").remove();   

var name = $("#name").val();
        var email = $('#email').val();
        var subject= $('#subject').val();
        var message = $('#message').val();

var hasError = false;

var emailReg = /^[+a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
 if(name == '') {
      $("#name").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

else if(subject == '') {
      $("#subject").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

else if(message == '') {
      $("#message").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

  else if(!emailReg.test(email)) {
      $("#email").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

  else  if(email == '') {
      $("#email").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

如何修改此代码，以便同时验证所有字段。

我确实尝试过使用jquery validate函数但是出于某种原因，当我使用它时，它会与我的页面的其他jquery元素冲突，导致表单被提交，尽管有不正确的值

Answer 1

将所有else if更改为if's。

if(name == '') {
      $("#name").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

if(subject == '') {
      $("#subject").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

if(message == '') {
      $("#message").after('<span class="error">This field is required.</span>');
      hasError = true;
    }

  if(!emailReg.test(email)) {
      $("#email").after('<span class="error">Enter a valid email address.</span>');
      hasError = true;
    }

  if(email == '') {
      $("#email").after('<span class="error">Please enter your email address.</span>');
      hasError = true;
    }

Answer 2

由于fileds的验证方式不同，而且用户获取的消息不同，您无法同时验证所有字段，而是可以组合必须使用相同算法验证的字段。为它们设置相同的类（对于所有不应为空的输入，它可以是notShouldBeBlank类名称：

$('#contactForm').submit(function () {

    $.each($('#contactForm .notShouldBeBlank'), function()
    {
        if($(this).val() == ''){
            $(this).after('<span class="error">This field is required.</span>');
        }
    });

    // Other groups validated here
}

希望这会有所帮助！

使用Jquery同时验证所有表单字段？

2 个答案: