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 函数，它遍历数组的所有元素：

$.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 小提琴

这是我在JSFIDDLE上的代码示例

提前致谢。

Answer 1

更新：

这就是你要找的吗？ => DEMO

$(document).ready(function () {

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

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

    });

    function chkAllFields() {
        $('.formInput').not(this).each(function(){
            if($.inArray($(this).attr('name'),requiredFields)>-1 && $(this).val()==''){
                $(this).addClass('redBorder');
            }
        });
        var empty=0;
        $('.formInput').each(function(){
            if($(this).val()==''){
                empty++;
            }
        });
        if(empty==0){
            $('#submit').prop('disabled',false);
        }
        else{
            $('#submit').prop('disabled',true);
        }
    }
    $('.formInput').blur(function(){
        $('.redBorder').removeClass('redBorder');
    });

}); 

Answer 2

您是否考虑过使用Jquery Validation plugin？

使用此插件，您可以轻松定义哪些字段是必需的，以及 提交表单之前必须满足的条件/事件。

查看example 看看它是否适合您的项目。

Answer 3

不完全确定你为什么要走那条复杂的路线。试试这个

http://jsfiddle.net/xzNPh/23/

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


function checkStatusBtn(){
    var valid = true;

    $.each( requiredFields, function( i, l ) {
        if ($(".formInput[name*='form[" + l + "]']").val()=="") valid=false;
    });

    // prop is better but im still stuck in an old mindset :(
    if (!valid){
        $("#submit").attr("disabled", "disabled");
    } else {
        $("#submit").removeAttr("disabled");
    }
}

$(document).ready(function () {



    $(document).on("submit","form",function(){
        var valid = true;


        $.each( requiredFields, function( i, l ) {
            if ($(".formInput[name*='form[" + l + "]']").val()=="") valid=false;
        });
        if (valid) {
            // do your form stuff here or leave it blank to submit normaly
        } else {
            return false;
        }
    })
    $(document).on("blur","input",function(){
        checkStatusBtn();
        var $this = $(this);
        var name = $this.attr("name");
        name = name.replace("form[","");
        name = name.replace("]","");

        $this.removeClass("redBorder");

        if (requiredFields.indexOf(name)!==-1){
            if ($this.val()==""){
                $this.addClass("redBorder")
            }

        }
    });
    $(document).on("keyup","input",function(){
        checkStatusBtn();

    });
    checkStatusBtn();

}); 

我个人会在必填字段中添加一个“必填”属性，然后检查所有“必填”的输入是否都已填写。不会使用数组路由。但你可能有需要它的理由

Answer 4

您应该将您的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);
});

小提琴

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