未启用引导程序提交按钮中的表单验证

时间：2016-08-01 11:02:25

标签： jquery html twitter-bootstrap-3 formvalidation-plugin

即使验证正确，也无法使用“保存”按钮提交表单。

<form id="userForm" method="post" class="form-horizontal"
      action="updatePetitionerView.do" style="display: none;">
  <div class="form-group">
    <label class="col-xs-3 control-label">Passport Number</label>
    <div class="col-xs-5">
      <input type="text" name="passport" size="9" maxlength="10"
             class="form-control" placeholder="Enter Passport Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="passport"
             title="Enter Passport Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">PAN Number</label>
    <div class="col-xs-5">

      <input type="text" name="pan" size="10" maxlength="10"
             class="form-control" placeholder="Enter PAN Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="pan" title="Enter PAN Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">FAX Number</label>
    <div class="col-xs-5">
      <input type="text" name="fax" size="10" maxlength="15"
             class="form-control" placeholder="Enter FAX Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="fax" title="Enter FAX Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Occupation</label>
    <div class="col-xs-5">
      <input type="text" name="occupation" size="14" maxlength="30"
             class="form-control" placeholder="Enter Occupation"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="occupation"
             title="Enter Occupation" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Country</label>
    <div class="col-xs-5">
      <input type="text" name="country" size="14"
             class="form-control" placeholder="Enter Country"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="country" title="Enter Country" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Nationality</label>
    <div class="col-xs-5">
      <input type="text" name="nationality" size="14"
             class="form-control" placeholder="Enter Nationality"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="nationality"
             title="Enter Nationality" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Alternate Phone
      Number</label>
    <div class="col-xs-5">
      <input type="text" name="phone" size="10" maxlength="10"
             class="form-control" placeholder="Enter Phone Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="phone" title="Enter Phone Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Alternate
      Address</label>
    <div class="col-xs-5">
      <textarea class="form-control" rows="2"
                placeholder="Enter Alternate Address"
                name="alternateaddress" data-placement="top"
                id="alternateaddress"></textarea>
    </div>
  </div>
  <input type="hidden" name="ptyno" id="ptyno" /> <input
                                                         type="hidden" name="type" id="type" />
  <div class="form-group">
    <div class="col-xs-5 col-xs-offset-3">
      <button type="button" class="btn btn-default"
              data-dismiss="modal">Close</button>
      <button type="submit" id="fmodel" class="btn btn-default">Save</button>
    </div>
  </div>
</form>

var $frm = $('#userForm');
$frm
.formValidation({
  framework : 'bootstrap',
  icon : {
    valid : 'glyphicon glyphicon-ok',
    invalid : 'glyphicon glyphicon-remove',
    validating : 'glyphicon glyphicon-refresh'
  },
  fields : {
    complaint : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Complaint name is required'
        },
        stringLength : {
          min : 3,
          max : 25,
          message : 'The Complaint Name must be more than 3 and less than 25 characters long'
        },
        regexp : {
          regexp : /^[a-zA-Z]+$/,
          message : 'The Complaint Name can only consist of alphabetical'
        }
      }
    },
    address : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Address is required'
        },
        regexp : {
          regexp : /^[a-zA-Z\s\.0-9#-_/]+$/,
          message : 'The Address can only consist of a-zA-Z\.0-9#-_/'
        }
      }
    },
    advocateName : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Advocate name is required'
        },
        stringLength : {
          min : 3,
          max : 25,
          message : 'The Advocate Name must be more than 3 and less than 25 characters long'
        },
        regexp : {
          regexp : /^[a-zA-Z]+$/,
          message : 'The Advocate Name can only consist of alphabetical'
        }
      }
    },
    passport : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Passport is required'
        },
        regexp : {
          regexp : /[a-zA-Z]{2}[0-9]{7}/,
          message : 'The Passport can only consist of Alphabetical & Numeric'
        }
      }
    },

    age : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The age is required'
        },
        stringLength : {
          min : 1,
          max : 3,
          message : 'The age must be more than 1 and less than 3 characters long'
        },
        regexp : {
          regexp : /^[0-9]+$/,
          message : 'The first can only consist of alphabetical'
        }
      }
    }
  }
});

1 个答案:

答案 0 :(得分：0)

var $frm = $('#userForm');
$frm
.formValidation({
  framework : 'bootstrap',
  icon : {
    valid : 'glyphicon glyphicon-ok',
    invalid : 'glyphicon glyphicon-remove',
    validating : 'glyphicon glyphicon-refresh'
  },
  fields : {
    complaint : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Complaint name is required'
        },
        stringLength : {
          min : 3,
          max : 25,
          message : 'The Complaint Name must be more than 3 and less than 25 characters long'
        },
        regexp : {
          regexp : /^[a-zA-Z]+$/,
          message : 'The Complaint Name can only consist of alphabetical'
        }
      }
    },
    address : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Address is required'
        },
        regexp : {
          regexp : /^[a-zA-Z\s\.0-9#-_/]+$/,
          message : 'The Address can only consist of a-zA-Z\.0-9#-_/'
        }
      }
    },
    advocateName : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Advocate name is required'
        },
        stringLength : {
          min : 3,
          max : 25,
          message : 'The Advocate Name must be more than 3 and less than 25 characters long'
        },
        regexp : {
          regexp : /^[a-zA-Z]+$/,
          message : 'The Advocate Name can only consist of alphabetical'
        }
      }
    },
    passport : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The Passport is required'
        },
        regexp : {
          regexp : /[a-zA-Z]{2}[0-9]{7}/,
          message : 'The Passport can only consist of Alphabetical & Numeric'
        }
      }
    },

    age : {
      row : '.col-xs-3',
      validators : {
        notEmpty : {
          message : 'The age is required'
        },
        stringLength : {
          min : 1,
          max : 3,
          message : 'The age must be more than 1 and less than 3 characters long'
        },
        regexp : {
          regexp : /^[0-9]+$/,
          message : 'The first can only consist of alphabetical'
        }
      }
    }
  }
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<script src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<form id="userForm" method="post" class="form-horizontal"
      action="updatePetitionerView.do" style="display: none;">
  <div class="form-group">
    <label class="col-xs-3 control-label">Passport Number</label>
    <div class="col-xs-5">
      <input type="text" name="passport" size="9" maxlength="10"
             class="form-control" placeholder="Enter Passport Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="passport"
             title="Enter Passport Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">PAN Number</label>
    <div class="col-xs-5">

      <input type="text" name="pan" size="10" maxlength="10"
             class="form-control" placeholder="Enter PAN Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="pan" title="Enter PAN Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">FAX Number</label>
    <div class="col-xs-5">
      <input type="text" name="fax" size="10" maxlength="15"
             class="form-control" placeholder="Enter FAX Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="fax" title="Enter FAX Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Occupation</label>
    <div class="col-xs-5">
      <input type="text" name="occupation" size="14" maxlength="30"
             class="form-control" placeholder="Enter Occupation"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="occupation"
             title="Enter Occupation" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Country</label>
    <div class="col-xs-5">
      <input type="text" name="country" size="14"
             class="form-control" placeholder="Enter Country"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="country" title="Enter Country" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Nationality</label>
    <div class="col-xs-5">
      <input type="text" name="nationality" size="14"
             class="form-control" placeholder="Enter Nationality"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="nationality"
             title="Enter Nationality" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Alternate Phone
      Number</label>
    <div class="col-xs-5">
      <input type="text" name="phone" size="10" maxlength="10"
             class="form-control" placeholder="Enter Phone Number"
             data-toggle="tooltip" autocomplete="off"
             data-placement="top" id="phone" title="Enter Phone Number" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-xs-3 control-label">Alternate
      Address</label>
    <div class="col-xs-5">
      <textarea class="form-control" rows="2"
                placeholder="Enter Alternate Address"
                name="alternateaddress" data-placement="top"
                id="alternateaddress"></textarea>
    </div>
  </div>
  <input type="hidden" name="ptyno" id="ptyno" /> <input
                                                         type="hidden" name="type" id="type" />
  <div class="form-group">
    <div class="col-xs-5 col-xs-offset-3">
      <button type="button" class="btn btn-default"
              data-dismiss="modal">Close</button>
      <button type="submit" id="fmodel" class="btn btn-default">Save</button>
    </div>
  </div>
</form>

相关问题
最新问题