Question

有人能告诉我jQuery验证有什么问题吗？它没有验证我的表单，而是忽略了导致不检查输入的代码。

表格：

<form class="form" accept-charset="UTF-8" action="URL-to-complete-form" method="POST" onsubmit="return validateForm();">
<input class="form-name" type="text" placeholder="Name"></div>
<input class="form-email" type="text"placeholder="Email"></div>
<input style="background-color: #fc8f12;" type="submit" value="Subscribe">
</div>
</form>

使用Javascript：

function validateForm()
{
    // Validate Name
    var title = $(".form-name").val();
    if (title=="" ||title=="Name" || title==null) { } else {
        alert("Please enter a name!");
    }

    // Validate Email
    var email = $(".form-email").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email=="Email" || email==null) { } else {
        alert("Please enter a valid email");
    }
  return false;
}

谢谢大家的时间和帮助。

Answer 1

对我而言，您似乎没有做任何事情来阻止提交表单，因为您有＆＃34; action =＆＃34;表单中的行...您在提交时告诉它，都运行javascript函数并提交表单。您应该让javascript在经过验证后提交表单。有很多方法可以做到这一点......可能最简单的方法是将提交按钮设置为类型按钮而不是类型提交，然后将验证和提交绑定到单击该按钮。

Answer 2

由于您正在“干预”提交回发以进行验证，因此请移动代码以清除，从表单中删除提交按钮，根据按钮单击执行验证并使用有效数据执行自己的表单自定义回发：

 <form class="form" accept-charset="UTF-8" method="POST" action="#">
        <input class="form-name" type="text" placeholder="Name"></div>
        <input class="form-email" type="text" placeholder="Email"></div>
        </div>
    </form>
    <button>Subscribe</button>

 $(function () {
            $('button').on('click', function (event) {
                validateForm();
            });

        });

        function validateForm() {
            // Validate Name
            var title = $(".form-name").val();
            if (!title) {
                alert("Please enter a name!");
                return false;
            }

            // Validate Email
            var email = $(".form-email").val();
            if (!email) {
                alert("Please an email address");
                return false;
            }

            if (!/(.+)@(.+){2,}\.(.+){2,}/.test(email)) {
                alert("Please enter a valid email");
                return false;
            }

            $.post('URL-to-complete-form', $("form").serialize(), function (data) {
                console.log('server call complete');
                console.log(data);
            });

        }

这也是一个有效的jsFiddle：http://jsfiddle.net/t8vQ2/

Answer 3

HTML：

<form id="form1" ...

jQuery的：

$("#form1").on("submit", function(){
  if($("input[name=firstName]").val() == ""){
    // errors here
    return false;
  }
});

jQuery表单验证被绕过

3 个答案: