我使用Bootstrap的形式CSS &验证。表单是Bootstrap模态的一部分。当用户单击提交时,输入不正确的验证,表单提交,引导程序也显示错误。
如何在表单值通过ajax传递之前应用引导验证?
下面是我的相关代码:
JavaScript:function feedbacksubmit() {
var formvalues = {
email : $('#feedbackemail').val(),
message : $('#feedbackmessage').val(),
};
$.ajax({
type: "POST",
url: "<?php echo base_url();?>feedback/add",
data: { values: formvalues },
success: function(response) {
alert('Thanks for your feedback!');
},
error: function(error) {
alert("Error");
}
});
}
$(".feedbacksubmit").click(feedbacksubmit);
Feeback模态:
<div class="modal-body">
<form method="post">
<div class="form-group">
<label class="control-label" for="feedbackemail">Email:</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input class="form-control" placeholder="your email address" name="feedbackemail" id="feedbackemail" type="email" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="feedbackmessage">Message</label>
<div class="input-group">
<textarea class="form-control" name="feedbackmessage" id="feedbackmessage" rows="8" cols="52" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary feedbacksubmit">Submit</button>
</form>
</div>
<form method="post" onsubmit="feedbacksubmit();">
这应该能奏效
和删除
$(".feedbacksubmit").click(feedbacksubmit);
一种方法是使用jQuery验证插件
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" minlength="2" type="text" required/>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required/>
</p>
<p>
<label for="curl">URL (optional)</label>
<input id="curl" type="url" name="url"/>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
或者你可以使用Bootstrap Validator/