Question

我有一个表单字段调用'No of Partners'取决于并显示在上一个下拉列表的选择上。否则它是隐藏的。与'隐藏'类。我的问题，我无法在验证这个领域后附加一个类成功。守则如下：

    <div class="row" id="divtypeofb">
                <div class="col-xs-12">
                <div class ="col-md-6">

                                        <div class="form-group">
                                            <label><li class="hide"></li>No of partners<span style="color: red;">&nbsp;*</span></label>
                                            <input type="number" name="no_of_promoters" id="number_of_promoters" min="2" value="<?=$business_info_details['no_of_promoters'];?>" class="form-control" placeholder="No of Partners involved" onkeyup="numberValidation('no_of_promoters')" >
                                            <span class="help-block hide"><li class="hide"></li>Select the number of partners involved.</span>
                                        </div>

                                    </div>
                                    </div>
                    </div>
                      <script type="text/javascript">
                        $(function() {
                             $('#company_type_id').change(function(){
                                 if($('#company_type_id').val()!=1){
                                     $("#divtypeofb").show(1000).removeClass("hide");
                                 } else {

                                     $("#divtypeofb").hide(1000).addClass("hide");
                                     $("#no_of_promoters").val('');

                                 }
                             });
                    });
function numberValidation(id){

                if($("#" + id).val() == null || $.trim($("#" + id).val()) == "" || !$.isNumeric($("#" + id).val())){
                    var div = $("#" +id).closest('div');
                    var label = div.find('label');
                    var span = div.find('span');
                    div.removeClass("has-success");
                    div.addClass("has-error");
                    label.find('li').removeClass('fa fa-check hide');
                    label.find('li').addClass('fa fa-times-circle-o');
                    span.removeClass("hide");
                    $("#" + id).focus();
                    //$("#" + id).scrollTo($(this),1000);
                    return false;
                } else{
                    var div = $("#" +id).closest('div');
                    var label = div.find('label');
                    var span = div.find('span');
                    div.removeClass("has-error");
                    div.addClass("has-success");
                    label.find('li').removeClass('fa fa-times-circle-o hide');
                    label.find('li').addClass('fa fa-check');
                    span.addClass("hide");
                    return true;
                }
            }

                    </script>

Answer 1

keyup属性使用错误的id调用验证程序：numberValidation('no_of_promoters')。元素的名称为no_of_promoters，但 ID 为number_of_promoters：

<input type="number" name="no_of_promoters" id="number_of_promoters" ...

您的代码也可以使用清理，因为它在if和else中包含重复的代码。

<div class="row" id="divtypeofb">
    <div class="col-xs-12">
        <div class ="col-md-6">
            <div class="form-group">
                <label><li class="hide"></li>No of partners<span style="color: red;">&nbsp;*</span></label>
                <input type="number" name="no_of_promoters" id="number_of_promoters" min="2" value="<?=$business_info_details['no_of_promoters'];?>" class="form-control" placeholder="No of Partners involved" onkeyup="numberValidation('number_of_promoters')" >
                <span class="help-block hide"><li class="hide"></li>Select the number of partners involved.</span>
             </div>
         </div>
     </div>
 </div>
 <script type="text/javascript">
    $(function() {
         $('#company_type_id').change(function(){
             if($('#company_type_id').val()!=1){
                 $("#divtypeofb").show(1000).removeClass("hide");
             } else {

                 $("#divtypeofb").hide(1000).addClass("hide");
                 $("#number_of_promoters").val('');

             }
         });
     });
     function numberValidation(id){

         var input = $("#" + id);
         var value = input.val();
         var div = input.closest('div');
         var label = div.find('label');
         var span = div.find('span');
         var li = label.find('li');
         if(value == null || $.trim(value) == "" || !$.isNumeric(value)){
            div.removeClass("has-success")
               .addClass("has-error");
            li.removeClass('fa fa-check hide')
              .addClass('fa fa-times-circle-o');
            span.removeClass("hide");
            input.focus();
            //input.scrollTo($(this),1000);
            return false;
        } else{
            div.removeClass("has-error")
               .addClass("has-success");
            li.removeClass('fa fa-times-circle-o hide')
              .addClass('fa fa-check');
            span.addClass("hide");
            return true;
        }
    }

</script>

附加bootstrap has-success类不起作用，一些javascript错误

1 个答案: