javascript - jQuery 在将表单填充到所有必填字段(如果为空)时添加类红色边框(填充除外)

Question

这是我在 stackoverflow 上的第一个问题，请理解。

我已经做了什么

HTML。我的表单:

<form>
    <div>
        <label>Surname</label>
        <input type="text" class="formInput" value="" name="form[surname]">
    </div>      

    <div>
        <label>Name</label>
        <input type="text" class="formInput" value="" name="form[name]">
    </div>  

    <div>
        <label>Phone</label>
        <input type="text" class="formInput swdt phone" value="" name="form[phone]" maxlength="16" autocomplete="off">
    </div>  

    <div>
        <label>E-mail</label>
        <input type="mail" class="formInput" value="" name="form[email]">
    </div>

    <div>
        <label>City</label>
        <input type="text" class="formInput" value="" name="form[city]">
    </div>                              

    <div>
        <label>Question</label>
        <textarea class="formInput w100" value="" name="form[question]" type="text"></textarea>
    </div>

    <div>
        <label>captcha</label><input type="text" class="captchaFld formInput" required="" name="form[verifyCode]">
    </div>                          

    <div>
        <button class="disabled" id="submit" type="submit" disabled="">send</button>
    </div>
</form>

JS. 我添加了一个必需字段的数组(这是供程序员使用的，这样他们就可以自己将所有必需的字段添加到该数组中)，并且只要用户没有填写数组中的所有字段“发送”按钮被禁用。

var requiredFields = ["surname", "name", "phone", "email", "city", "verifyCode", "question"];

JS。这是我的每个函数，它遍历数组的所有元素:

$.each( requiredFields, function( i, l ) {
    $(".formInput[name*='form[" + l + "]']").each(function () {
      $(this).keyup(function () {
          $("#submit").prop("disabled", chkAllFields());
      });                       
   });      
});

JS. 这是我的函数 chkAllFields() ，它再次运行(((遍历数组的所有元素并检查字段是否为空:

function chkAllFields() {
var valid = false;
$.each( requiredFields, function( i, l ) {
    $(".formInput[name*='form[" + l + "]']").each(function () {
        if (valid) {
            $("#submit").addClass('disabled');
            if ($(".formInput[name*='form[" + l + "]']").val() == '') {
                $(this).addClass('redBorder');
            }
            else {
                $(this).removeClass('redBorder');
            }
            return valid;
        }
        else {
            $("#submit").removeClass('disabled');
            var input = $.trim($(this).val());
            valid = !input;
        }
    });
});     
return valid;
}

完成我需要什么

1. 我需要将“redBorder”类添加到除现在已填充的字段之外的所有必填字段和空字段(当用户键入时)；
2. 在“模糊”方法中，当用户“取消焦点”时，必须删除任何提交的所有“redBorder”类。

目前它会出现错误(红色边框很奇怪)，我不知道在哪里可以找到修复程序..

JS fiddle

这是我在 JSFIDDLE 上的代码示例

提前致谢。

Answer 1

您应该将 JavaScript 修改为:

$(document).ready(function () {
    // get the validation fields
    var requiredFields = ["surname", "name", "phone", "email", "city", "verifyCode", "question"];

    // use a function because you want to use it 'onkeyup' and on 'focus'
    var validate = function(){
        $("#submit").prop("disabled", false);
        $.each( requiredFields, function( i, l ) {  
            $(".formInput[name*='form[" + l + "]']").removeClass('redBorder');
            if ($(".formInput[name*='form[" + l + "]']").val() == ""){
                $("#submit").prop("disabled", true);
                $(".formInput[name*='form[" + l + "]']").addClass('redBorder');
            }                               
        });
    };

    // bind the events. I use document in case of you add fields dynamically
    $(document).on('keyup', validate);
    $('input').focus(validate);
});

fiddle

http://jsfiddle.net/xzNPh/27/