gpt4 book ai didi

jQuery 表单验证没有启动

转载 作者:行者123 更新时间:2023-11-28 00:10:06 25 4
gpt4 key购买 nike

我已经编写了以下代码,但表单试图发布,就好像未找到 javascript 一样?

代码在 <head> 内文件的:

<script language="JavaScript" type="text/javascript">
$('.entrysend').click(function(e){
e.preventDefault();

var error = false;
var name = $('#name').val();
var address = $('#address').val();
var phone = $('#phone').val();
var email = $('#email').val();

if(name.length == 0){
var error = true;
alert("Please complete all fields");
}
if(address.length == 0){
var error = true;
alert("Please complete all fields");
}
if(phone.length == 0){
var error = true;
alert("Please complete all fields");
}
if(email.length == 0){
var error = true;
alert("Please complete all fields");
}

if(error == false){
$.post("compthanks.asp",
$(".entry").serialize(),
function(result){
if($.trim(result) == 'sent'){
$('.entrysend').remove();
alert("Thanks for entering!");
}
}
</script>

HTML:

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
<br class="floatClear" />
<div class="formwrapper">
<input name="name" id="name" type="text" placeholder="FullName" />
</div>

<div class="formwrapper">
<textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
</div>

<div class="formwrapper">
<input name="phone" id="phone" type="text" placeholder="ContactNumber" />
</div>

<div class="formwrapper">
<input name="email" id="email" type="text" placeholder="Email" />
</div>

<div class="formwrapper floatClear">
<input name="submit" type="submit" value="Send Entry" class="entrysend" />
</div>
</form>

谁能指出表单仍然提交而不是 javascript 启动的原因?

最佳答案

如果你的JS在<head>你的页面,那么这将不起作用。当你添加

$('.entrysend').click(function(e){...});

没有类为entrysend的元素还在页面上。

要解决这个问题,您有两个选择:

  • 将您的 JS 移动到页面底部,<form> 之后元素。

  • 将您的 JS 包装在 ready 中处理程序:

JS:

$(document).ready(function() {
$('.entrysend').click(function(e){...});
});

这样,jQuery 将等到所有 HTML 都已添加到 DOM 中,然后再尝试将点击处理程序附加到 entrysend元素。

更新:

我刚刚将您的代码添加到 jsFiddle 中,发现您发布的代码中存在 JS 错误。这可能只是一个复制/粘贴错误,但它可能是您问题的原因:

您永远不会关闭一半的功能。你以两个大括号结束,最后才关闭你 function堵塞。您需要添加 )}})到你的 JS

  • A )关闭 $.post
  • A }关闭 if(error == false)
  • A }关闭 click 中的匿名函数处理程序
  • A )关闭点击处理程序

新的 JS:

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('.entrysend').click(function(e){
e.preventDefault();

var error = false;
var name = $('#name').val();
var address = $('#address').val();
var phone = $('#phone').val();
var email = $('#email').val();

if(name.length == 0){
var error = true;
alert("Please complete all fields");
}
if(address.length == 0){
var error = true;
alert("Please complete all fields");
}
if(phone.length == 0){
var error = true;
alert("Please complete all fields");
}
if(email.length == 0){
var error = true;
alert("Please complete all fields");
}

if(error == false){
$.post("compthanks.asp", $(".entry").serialize(),function(result){
if($.trim(result) == 'sent'){
$('.entrysend').remove();
alert("Thanks for entering!");
}
});
}
});
});
</script>

关于jQuery 表单验证没有启动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15830568/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com