在CodeIgniter中使用Bootstrap提交jQuery表单


jQuery form submission using Bootstrap in CodeIgniter

我使用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/