这是我的联系页面表单代码。我正在使用bootstrap 3和bootstrapvalidator。问题是当我点击按钮"发送消息"什么都没发生。我的代码有什么问题吗? 我正在使用在bootstrap框架上创建的编码模板。 验证,除了这个按钮,一切都很好。
<form action="1.html" id="defaultForm" method="post">
<div class="form-group">
<label class="control-label">Name</label>
<input type="text" class="span12"class="form-control" name="username" placeholder="Your First Name" /> <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
</div>
<div class="form-group">
<label class="control-label">Email </label>
<input type="text" class="span12" class="form-control" name="email" placeholder="Your Email Address" /> <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
</div>
<div class="form-group">
<label class="control-label">Message</label>
<textarea rows="8" class="span12" name="msg" placeholder="Your Message or Commnet :)"></textarea> <!--SET CLASS=SPAN12 ONLY else VALIDATION SIGNS WILL BE DISORDERED-->
</div>
<div class="form-group">
<label id="captchaOperation"></label>
<input class="span4" type="text" class="form-control" name="captcha" />
</div>
<button type="submit" class="btn-u">Send Message</button>
</form>
BootstrapValidator脚本
<script type="text/javascript">
$(document).ready(function() {
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
function generateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
};
generateCaptcha();
$('#defaultForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
message: 'The name is not valid',
validators: {
notEmpty: {
message: 'The name is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The name must be more than 6 and less than 30 characters long'
},
/*remote: {
url: 'remote.php',
message: 'The username is not available'
},*/
regexp: {
regexp: /^[a-zA-Z]+$/,
message: 'The name can only consist of alphabetical'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
msg: {
validators: {
notEmpty: {
message: 'The is required and can\'t be empty'
},
stringLength: {
min: 10,
message: 'The message must be more than 10 characters long'
}
}
}
}
})
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
// Get the form instance
var $form = $(e.target);
// Get the BootstrapValidator instance
var bv = $form.data('bootstrapValidator');
// Use Ajax to submit form data
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
if (!bootstrapValidator.isValidField('captcha')) {
// The captcha is not valid
// Regenerate the captcha
generateCaptcha();
}
});
});
</script>