Question

<!DOCTYPE html>
<html>

<head>
<title>Registration Form</title>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script type="text/javascript" src="validator/src/js/bootstrapValidator.js"></script>


</head>

<body>

  <div class="container">
<div class="row-fluid">
  <!--<div class="span6 offset3">-->
    <div class="well" style="margin:0 auto;max-width:500px; box-shadow: 1px 1px 1px 1px gray; background-color: #F7F7FA">
    <h1 style="text-align: center;color:#0072a7; font-family: Times new roman"><strong>REGISTRATION FORM</strong></h1>
    <hr style="height:1px; background-color: #0072a7;">
  </div>

名称： *

            <tr style="padding-top: 10px;">
            <td><div class="form-group has-feedback">
            <label class="control-label;">Email Id:</label><span style="color:red"> *</span><span class="glyphicon glyphicon-envelope form-control-feedback"></span><input type="email" size="100;" name="email" class="form-control" id="email" placeholder="Enter your Email">
          </div></td>
        </tr>


        <tr style="padding-top: 10px;">
          <td><div class="form-group has-feedback">
            <label class="control-label;">Contact:</label><span style="color:red"> *</span><span class="glyphicon glyphicon-earphone form-control-feedback"></span><input type="text" size= "100;" name="contact" class="form-control" id="contact" placeholder="Enter your contact number">
          </div></td>
        </tr>


        <tr style="padding-top: 10px;">
          <td><label class="control-label">Course:</label><span style="color:red"> *</span>
            <div class="radio">
              <label><input type="radio" value="CSE" name="course" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;CSE&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" value="IT" name="course" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;IT&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" value="ECE" name="course" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;ECE&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" value="EEE" name="course" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;EEE&nbsp;</label>&nbsp;&nbsp;</td>
        </tr>


        <tr style="padding-top: 10px;">
          <td><label class="control-label">Year:</label><span style="color:red"> *</span>
            <div class="radio">
              <label><input type="radio" name="year" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;First Year&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" name="year" style="width:15px;height:15px; padding-bottom:2px;">&nbsp;Second Year&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" name="year" style="width:15px;height:15px;padding-bottom:2px;">&nbsp;Third Year&nbsp;</label>&nbsp;&nbsp;
              <label><input type="radio" name="year" style="width:15px;height:15px; padding-bottom:2px;">&nbsp;Fourth Year&nbsp;</label>&nbsp;&nbsp;</td>
            </div>
        </tr>

     <tr style="padding-top: 15px;">
          <td><label class="control-label">Are you a Robot?</label><span style="color:red"> *</span>
            <div class="checkbox">
            <label><input type="checkbox" style="width:15px; height:15px;" name="robot" />Yes</label>&nbsp;
            <label><input type="checkbox" style="width:15px; height:15px;" name="robot" />No</label>
            </div>
          </td>
      </tr>









        <tr style="padding-top: 15px;">
          <td><input type="submit" value="Submit" class="btn btn-primary btn-md pull-right"><td>
        </tr>

      </table>
    </form>
  <!--</div>-->

   <script type="text/javascript">
   $(document).ready(function() {
     $('#registration').bootstrapValidator({
       message: 'This value is not valid',
       feedbackIcons: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: 'The full name is required and cannot be empty'
       },
       regexp: {
         regexp: /^[a-zA-Z]+$/,
         message: 'The name can only consist of alphabets'
       }
      }
    },
     email: {
       validators:{
         notEmpty:{
           message:'The email address is required and cannot be empty'
       },
       emailAddress: {
                    message: 'The email address is not valid'
                }
     }
    }
  },

  contact: {
   message: 'The mobile mumber is not valid',
     validators: {
       notEmpty:{
         message: 'The Mobile Number is required and cannot be empty'
     },
     stringLength:{
       min: 10,
       max: 10,
       message: 'Please enter a valid Mobile Number.'
   },
  regexp:{
    regexp: /^[0-9]+$/,
      message: 'The Mobile Number can only consist of numerical values'
    },
  }
},
    course: {
      validators:{ 
        notEmpty: {
          message: 'The branch is required'
     }
   }
 },
     year: {
       validators:{
          notEmpty:{
            message: 'The year is required'
        }
     }
},
robot: {
    validators: {
      notEmpty: {
        message: 'Select either yes or no'
    }
  } 
}
},
.on('success.form.bv', function(e){

  var $form = $(e.target);
  var bv = $form.data('bootstrapValidator');

  $.post($form.attr('action'), $form.serialize(), function(result){
     console.log(result);
}, 'json');


});
});

</script>
</div>
</div>











































    </body>
    </html>

给定代码中的

bootstrap验证器根本不起作用，有人能指出错误吗？ cdn有什么问题吗？提交表单有点棘手。也有人可以解释ajax编码吗？

bootstrap验证器不工作

0 个答案: