Question

我正在为表单的表单字段构建验证。所以，我需要做一个我喜欢的验证：

 $(document).ready(function() {

    $('#submitbutton').click(function() {

        if (validateField()) {
            $('form.checkout_form_validate').submit(function(event) {
                return true;
            });
        }
        else {
             $('form.checkout_form_validate').submit(function(event) {
                event.preventDefault();
                return false;
            });
       }
    });


    function validateField() {
        var first_name = $('#first_name').val();
        var last_name = $('#last_name').val();
        var shipping_address = $('#shipping_address_1').val();
        var city = $('#city').val();
        var state = $('#state').val();
        var phone = $('#phone').val();

        if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
            $('#errorcontainer').html('Fill out all the required fields <br/>');
            $('#errorcontainer').fadeIn('fast');
            return false;
        } else {
            return true;
        }
    }

});

所以，如果用户只是按下提交按钮，它将抛出一个错误而Form将不会提交，但是，如果执行此操作后，用户填写整个表单然后点击提交，即使{{ {1}}是真的。如何＆＃34;重置＆＃34;它？有什么想法吗？

Answer 1

每次点击“提交”按钮，您都会绑定新表单提交处理程序。不要嵌套事件......

验证逻辑应该是：

$(function() {
  $('form.checkout_form_validate').submit(function(event) {
    return validateField();
  });
});

function validateField() {
  var first_name = $('#first_name').val();
  var last_name = $('#last_name').val();
  var shipping_address = $('#shipping_address_1').val();
  var city = $('#city').val();
  var state = $('#state').val();
  var phone = $('#phone').val();

  if (first_name == "" || last_name == "" || shipping_address == "" || city == "" || state == "" || phone == "") {
    $('#errorcontainer').html('Fill out all the required fields <br/>');
    $('#errorcontainer').fadeIn('fast');
    return false;
  } else {
    return true;
  }
}

Answer 2

你不需要e.preventDefault（）;并且返回虚假;声明，他们做同样的事情

在jQuery事件处理程序中返回false = e.preventDefault（）和e.stopPropagation（）

重置event.preventDefault（）

2 个答案: