javascript - 提交表单验证

Question

我正在尝试检查input[required]是否有值，如果没有，则不要提交表单并抛出错误，如果所有内容都已填写，则提交表单。 我认为这是我的 return false 未位于正确位置的问题。

JavaScript:

$('#MyForm').bind('submit', function() {

   $('#MyForm input[required]').each(function() {
       var hasValue = $(this).val().length;
       var hasRequired = $(this).prop('required');
       var inputClass = '#error-' + $(this).attr('name');

        function validator() {
           if( hasValue == 0 ) {
                console.log('Step 1');
                $(inputClass).show();
                $(this).addClass('error')
            } else {
                console.log('Step 2');
                $(inputClass).hide();
                $(this).removeClass('error')
            }
        }
        if( validator() == true ) {
           console.log('Form Submitted');
        //   $('#myForm').submit();
       }
   });

   return false;
});

示例HTML:

<form class="contact-form" id="MyForm" role="form" method="POST" action="" novalidate="novalidate">
                <div class="group">
                    <label for="first_name">First Name *</label>
                    <input type="text" id="first_name" name="first_name" placeholder="First Name" required="" aria-required="true">
                </div>
                <div class="group">
                    <label for="last_name">Last Name *</label>
                    <input type="text" id="last_name" name="last_name" placeholder="Surname" required="" aria-required="true">
                </div>
                <input id="submit" name="submit" type="submit" value="Send" class="btn">
            </form>

Answer 1

如果需要，您可以以更有条理的方式进行管理，为其他表单字段(例如电子邮件、电话等)添加更多规则。我还向父级添加了错误类，以便您可以按照自己的方式设计它。

jQuery(document).ready(function($) {

     $('#MyForm').on('submit', function(){
        var form = this;
        if(validateForm(form)) {
            // Validation pass.  you can process your form
            alert('Form validated');
        }
        else{
            event.preventDefault();
            return false;
        }
      });

        function validateForm(form) {
            valid = true;

            $(form).find('input[type=text], input[type=email]').each(function(i, val){
                if(validateField(val, true) == false) { valid = false; }
            });

            return valid;
        }
        function validateField(field, submit) {
            var val = $(field).val();
            if($(field).attr('aria-required') == 'true' && submit){
                if(val == '') {
                    $(field).parent().removeClass('valid');
                    $(field).parent().addClass('error');
                    return false;
                }else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
                // you can more specific
                if($(field).attr('type') == 'text') {
                    $(field).parent().addClass('error');
                    return false; }
                else {
                    $(field).parent().removeClass('error');
                    $(field).parent().addClass('valid');
                    return true;
                }
            }
        }

    });

JSfiddle 链接:https://jsfiddle.net/afsgp2bj/2/