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

我希望这个解决方案适合你。您在循环中放置了return语句。您需要将return语句放在验证函数中。

function validator(hasValue,inputClass) {
           if( hasValue == 0 ) {
                console.log('Step 1');
                $(inputClass).show();
                $(this).addClass('error');
                return false;
            } else {
                console.log('Step 2');
                $(inputClass).hide();
                $(this).removeClass('error');
                return true;
            }
        }



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

   $('#MyForm input[required]').each(function() {
       var hasValue = $(this).val().length;
       var hasRequired = $(this).prop('required');// I don't know what it does for you.
       var inputClass = '#error-' + $(this).attr('name');
        if( validator(hasValue,inputClass) ) {
           console.log('Form Submitted');
        //   $('#myForm').submit();
       }
   });

在for循环中你放置了不好的功能。

Answer 2

如果您愿意，可以更有条理地制作，为其他表单字段（如电子邮件，电话等）添加更多规则。我还向父级添加了错误类，以便您可以按自己的方式设置样式。

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/

Answer 3

你应该在循环中移除你的函数：

$(function() {
    $('#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');

            if( hasValue == 0 ) {
                console.log('Step 1');
                $(inputClass).show();
                $(this).addClass('error')
            } else {
                console.log('Step 2');
                $(inputClass).hide();
                $(this).removeClass('error')
            }
        });

        return false;
    });
});

.error {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 4

您还可以尝试按钮点击事件和 event.preventDefault（）：

event.preventDefault（）将阻止父事件调用

$("#submit").click(function (event) {
    $('#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');
                event.preventDefault();
                return false;
            } else {
                console.log('Step 2');
                $(inputClass).hide();
                $(this).removeClass('error');
            }
        }
        if (validator() == true) {
            console.log('Form Submitted');
            //$('#myForm').submit();
        }
    });

});

Answer 5

使用required =＆＃34;＆＃34;在输入字段中它将起作用。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="testForm" id="testForm">
<input name="test" id='test' required="required"/>
<button type="submit">submit </button>
</form>

＆＃13;

提交表单验证

5 个答案: