Question

我正在使用Bootstrap来形成CSS＆amp;验证。该表单是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);

反馈模式：

<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>

Answer 1

<form method="post" onsubmit="feedbacksubmit();">

这应该可以解决问题

并删除

$(".feedbacksubmit").click(feedbacksubmit);

Answer 2

一种方法是使用 jQuery Validation plugin

<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/

在CodeIgniter中使用Bootstrap提交jQuery表单

2 个答案: