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。我添加了一个必需的文件数组（这是程序员所以他们可以自己将所有必需的文件添加到这个数组中）并且只要用户没有填充数组中的所有字段＆＃34;发送＆＃34;按钮被禁用。

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;
}

完成所需的内容

我需要添加＆＃34; redBorder＆＃34; class到所有必需和空文件（当用户类型）处理现在填充的字段;
并且＆＃34;模糊＆＃34;用户＆＃34;无焦点＆＃34;任何归档的所有＆＃34; redBorder＆＃34;必须删除类。

现在它适用于错误（红色边框很奇怪），我不知道在哪里找到修复程序..

JS Fiddle

以下是我在JSFIDDLE

提前致谢。

Answer 1

<强>更新：

这是你要找的？ =＆GT;的 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();

});

personaly我会在所需的字段中添加“required”属性，并检查是否填写了“required”的所有输入。不会使用数组路由。但你可能有理由需要它

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/

将表单填充到所有必填字段（如果为空）时，jQuery添加类除了填充之外的红色边框

4 个答案:

小提琴