Question

我有一个验证文本字段的注册表单，如果用户单击/标签显示错误消息时它是空的。我在下面的代码中遇到的问题是要在多个表单字段中复制很多。下面的例子是名字，但我看不到使用我必须对多个字段做同样的事情的方法。

            /* this will call ajax call after entering all the below three fiels */
    var $fields = $('#testid');
    $fields.live('blur',function(e) {
        e.preventDefault();
        var $emptyFields = $fields.filter(function() {
            return $.trim(this.value) === "";
        });

        if ($emptyFields.length) {

                var frm = $(this).parents('form');
                var url=$('#valNameEmail').val();
                jQuery.ajax({
                         url: url,
                         data: $(this).parents('form').serialize(),
                         type: 'POST',
                         dataType: "json",
                         success: function(response){
                            if (response.HtmlMessage === 'success'){
                                $('.reg-alreadyRegistered').html('');
                                $('.reg-alreadyRegistered').css('display', 'none');
                                 ACC.registration.tickIcon($('#testid'));

                                 var radioExCustValue = $('#registration-form input[name=existingCustomer]:checked').val();
                                 if (userNameAjax === true) {
                                     if (radioExCustValue == 'false'){
                                         $('#regFormSubmit').removeAttr('disabled');
                                     }
                                     else {
                                         if (customerValidation == true){
                                             $('#regFormSubmit').removeAttr('disabled');
                                         }
                                     }
                                 }
                                 emailIDajax = true;
                             } else {
                                 ACC.registration.errorIcon($('#testid'));


                                 $('.reg-alreadyRegistered').html(response.HtmlMessage);
                                 $('.reg-alreadyRegistered').css('display', 'block');
                                 emailIDajax = false;
                                 $('#regFormSubmit').attr('disabled','disabled');
                             }
                         },
                         error: function(){
                                //alert(response);
                                //console.log('ERROR!')
                         }

                  });
        }
    });

Answer 1

您可以提供相同的输入，这些输入需要对类进行相同类型的验证（或者如果您想要所有input[type=text]，则可以将其用于选择器。

所以，假设我有一个这样的表格：

<form id="mform">
    <input type="text" class="inptxt" name="it1" />
    <input type="text" class="inptxt" name="it2" />
    <!-- other similar text inputs with the same class -->
    <input type="submit" id="sub" value="Submit" />
</form>

我有一个文本输入函数，如果该字段为空则返回false，否则为true：

$.fn.isValid = function() {
    return $.trim($(this).val());
}

然后我按类获取输入并立即验证它们：

$('#mform').on('submit', function(e) {
    e.preventDefault();
    var allValid = true;
    $('.inptxt').each(function() {
        if (!$(this).isValid()) {
            $(this).css('background-color', 'red');
            allValid = false;
        }
        else
            $(this).css('background-color', 'white');
    });
    if(allValid) {
        //everything's valid ... submit the form
    }
});

jsfiddle DEMO

Answer 2

这对我有用：

$('#registration-form input').blur(function(){
    if( $(this).val().length === 0 ) {
            ACC.registration.errorIcon($(this));
    }
        else{
            ACC.registration.tickIcon($(this));
        }
    });

感谢您的帮助

使用javascript验证单个表单输入

2 个答案: