在 CodeIgniter 中使用 Bootstrap 提交 jQuery 表单答案

【问题标题】：jQuery form submission using Bootstrap in CodeIgniter在 CodeIgniter 中使用 Bootstrap 提交 jQuery 表单
【发布时间】：2014-08-02 10:57:41
【问题描述】：

我正在使用 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);

反馈模式：

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

【问题讨论】：

标签： javascript php jquery codeigniter twitter-bootstrap

【解决方案1】：

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

这应该可以解决问题

然后删除

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

【讨论】：

这不起作用。这样做，引导程序工作正常，但 js 函数中没有传递任何值。
对不起，我忘记了“;” !
仍然没有成功。提交成功/错误后不会弹出提示。（之前显示过）

【解决方案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/

【讨论】：