Question

我有一个很长的form，它被分成几个部分，我想通过JavaScript仅针对特定部分触发验证。要么我想指定包含一组必要输入以进行验证的div，或者如果不可能，则循环通过一组已知输入并依次验证每个输入。我正在使用Bootstrap v3验证。

关于如何做到这一点的任何想法？

Answer 1

你可以用这个

<?php echo form_open("placead/addCredentials",array("name"=>'form1',"id"=>'formElement','content')); ?>
<div class="halfForm">
            <label>First Name</label> <input type="text" name="fname" id="fname" class="formtextBox" value="<?php echo set_value('fname'); ?>">
            <span><?php echo form_error('fname'); ?></span>
          </div><!--halfForm-->

var errors = false;
$( "#formElement" ).on("submit",function(e) {
 $('#formElement .my input, #formElement .my select').each(
            function(index){  
               var input = $(this);

                  if( (input.attr('type')=='text'|| input.attr('type')=='password')  &&  input.attr('name')!='website' ){
                      if(input.val()==''){
                      $(this).parent('.halfForm').find('label').addClass('error'); 
                      input.focus();
                      errors = true;
                      return false;
                      }
                      else{
                        $(this).parent('.halfForm').find('label').removeClass('error');
                        errors = false;
                      }
                  }

                  if(input.attr('type')=='email'){
                      if(!ValidateEmail(input.val())){
                          $(this).parent('.halfForm').find('label').addClass('error');
                          input.focus();
                          errors = true;
                        return false;

                      }else{
                          $(this).parent('.halfForm').find('label').removeClass('error');
                         errors = false;
                      }
                  }

                  if(input.attr('type')=='tel'){
                      if(input.val()==''){
                          $(this).parent('.halfForm').find('label').addClass('error');
                          input.focus();
                          errors = true;
                          return false;
                      }else{
                          $(this).parent('.halfForm').find('label').removeClass('error');
                         errors = false;
                      }
                  }
             });
if(errors){
         e.preventDefault();
        return false;
      }
});

function ValidateEmail(mail) 
{
 if(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(mail))
  {
    return (true)
  }
    return (false)
}

Answer 2

在没有Bootstrap验证解决方案的情况下，我实现了以下功能：

function ValidateAllRequiredFieldsInDiv(divName) {
    var valid = true;

    var required = $('#' + divName + " :input").filter('[required]');
    required.each(function (index, obj) {
        var control = $(this);
        if (IsControlValid(control)) {
            control.removeClass('invalid');
        } else {
            control.addClass('invalid');
            valid = false;
        }
    });

    return valid;
}

function IsControlValid(control) {
    var value = control.val();
    if (control.is('input') || control.is('textarea')) {
        return value != null && value != '';
    } else if (control.is('select')) {
        return value != null && value != '' && value > 0;
    } else {
        return true;
    }
}

仅在div或字段上触发验证

2 个答案: