Question

我使用startbootstrap-clean-blog-1.0.2模板作为我的常规项目的基础。我目前正在制作一个小型列表/视图应用程序（我第一次尝试这样的事情）。当我单击表单中的“提交按钮”时，联系表单的bootstaps验证脚本会运行并阻止表单因“indexof”冲突/错误而提交（如果我猜错了）

使用Chromes开发人员工具我在单击提交按钮时发现以下错误：

Uncaught TypeError: Cannot read property 'indexOf' of undefined 
(Clean-blog.js:25)

$.jqBootstrapValidation.submitSuccess 
(Clean-blog.js:25)

(anonymous function)
Clean-blog.js:25

jquery.js:4409 jQuery.event.dispatch
(jquery.js:4095) 

jQuery.event.add.elemData.handle
(jquery.js:4095)

我对javascript或jQuery没有真正的了解，还在学习PHP。错误似乎与联系表单的验证脚本有关，我的列表/查看页面没有任何关系（或者我认为）。我所要做的就是确保我的表单有效（当我点击按钮时，它会转到submitted.php页面）。如何才能提交页面？

我看过很多帖子都在询问'如何阻止提交'，但没有提到如何在bootstrap中获取表单以提交'堆栈'。

这是我的代码：

<form class='' action='sent.php' method='post' name='sendTest'>
                    <ul>
                        <li>
                            <h2>TEST</h2>
                        </li>
                        <li>
                            <label for='name'>Name:</label>
                            <input type='text' name='name' />
                        </li>
                        <li>
                            <button type='submit'>Insert Name</button>
                        </li>
                    </ul>

                </form>

Answer 1

clean-blog需要一个标识为name（var name = $("input#name").val()）的输入元素，而您的代码中不存在

<input type='text' name='name' id="name"/>

Answer 2

阅读Clean-blog.js中的代码，您可以使用$("input#name").val()检查是否正在尝试按ID访问输入值，但您只是定义了name="name"。

js中的代码：

var name = $("input#name").val();
var email = $("input#email").val();
var phone = $("input#phone").val();
var message = $("textarea#message").val();
var firstName = name; // For Success/Failure Message
// Check for white space in name for Success/Fail message
if (firstName.indexOf(' ') >= 0) {
    firstName = name.split(' ').slice(0, -1).join(' ');
}

但是选择器导致firstName未定义，因此无法执行indexOf。

为您的输入添加id="name"：

<input type="text" id="name" name="name" />

Bootstrap阻止表单提交

2 个答案: