输入按钮不能在Jquery表格上工作

我在我的所有代码中使用以下或类似的设置。我意识到，如果你跳过所有字段，只输入最后一个字段，不管最后一个字段是什么..表单提交..我想阻止表单提交，如果细节（标志为1）输入按钮不能在Jquery表格上工作

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>JS</title> 
</head> 
<body> 

<form name="m2mform" id="m2mform" method="post" onsubmit="return form()" > 
u:<input id="user" name="user" type="text" value=""> 
email:<input id="email" name="email" type="text" value=""> 
<input class="submitx" type="button" onClick="javascript:form();"/> 

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
flag = 1; 
function form() { 
    if (document.getElementById("user").value == "") { 
     // slidedown some red css 
     flag = 1; 
    } else { 
     // dont show red css 
     flag = 0; 
    } 
    if (document.getElementById("email").value == "") { 
     // slidedown some red css 
     flag = 1; 
    } else { 
     // dont show red css 
     flag = 0; 
    } 
    if (flag == 1) { 
     // dont submit form 
    } 
    else { 
     var submitForm; 
     submitForm = document.getElementById("m2mform"); 
     submitForm.submit(); 
    } 
} 
</script> 
</body> 
</html>

更新了另一个尝试：

var flag = 0; 
function nValidateForm() { 
    var flag = 0; 
    if (document.getElementById("fullname").value == "") { 
     $('#fullnamefail').slideDown("fast"); 
     flag = 1; 
    } 
    else { 
     $('#fullnamefail').slideUp("fast"); 
     flag = 0; 
    } 

    if (flag == 1) { 
     $('#error').fadeIn('slow'); 
     return false; 
    } 
    else { 
     var custForm; 
     custForm = document.getElementById("m2mform"); 
     custForm.submit(); 
    } 
}

来源

2011-11-17 TheBlackBenzKid

你的逻辑是有缺陷的。如果已经升高（等于1），则不得降低标志（更改为0）。另外，你不应该直接再次调用submit()，只是返回true或者false。

修复以最小的改变你原来的代码：

flag = 0; //lower by default 
if (document.getElementById("user").value == "") { 
    // slidedown some red css 
    flag = 1; 
} else { 
    // dont show red css 
} 

if (document.getElementById("email").value == "") { 
    // slidedown some red css 
    flag = 1; 
} else { 
    // dont show red css 
} 
if (flag == 1) { 
    // dont submit form 
    return false; 
} 
else { 
    return true; 
}

这仅仅是一个标志设置为0只有一次，在上面，任何验证错误导致的标志得到提升。

这是可行的，但你已经在使用jQuery考虑使用它的力量..只是谷歌“jQuery的表单验证”的功能非常强大和简单的方法来验证用户输入。

来源

2011-11-17 11:30:03

你忘记了，这将在递归结束，如'的onsubmit =“申报单（）”'将调用方法'form'，它调用'submitForm.submit（）'再次调用的onsubmit处理程序... –

谢谢@Andreas我没有注意到他称之为函数的方式。 –

我把这个答案标记为OK。我的新JS代码：http：//www.gc-cdn.com/assets/js/m2m_c.js我的新页面：http：//www.gorgeouscouture.com/new.m2m.php - 但是将来我会使用上面的代码，因为它们是真的jQuery – TheBlackBenzKid

你在这里缺少一个return false; ......和喜欢使用type="submit"代替type="button"（你不需要申报的form()的方法调用两次，如果你正确使用submit）

例如用button类型：

<form method="post" onSubmit="return form();"> 
    u:<input id="user" type="text" value=""><br /> 
    email:<input id="email" type="text" value=""><br /> 
    <input id="submit" type="button" value="submit" onClick="window.submitFromButton();" /> 
</form> 
<script type="text/javascript"> 
window.form = function(sender) { 
    var $user = $('#user'); 
    var $email = $('#email'); 
    $user.css('background-color', 'white'); 
    $email.css('background-color', 'white'); 
    var submitTheForm = true; 
    if (!$user.val()) { 
     $user.css('background-color', 'red'); 
     submitTheForm = false; 
    } 
    if (!$email.val()) { 
     $email.css('background-color', 'red'); 
     submitTheForm = false; 
    } 
    return submitTheForm; 
}; 
window.submitFromButton = function() { 
    var $form = $('form'); 
    $form.submit(); 
} 
</script>

看到我的工作示例here
看到我的工作示例与风格here
看到类型我的工作示例buttonhere

来源

2011-11-17 11:02:02

nope。看到更新的代码。第2版，仍然没有工作 – TheBlackBenzKid

加上这不是feesable作为回报虚假的，所有如果最终块是行不通返回true - 这是全码：http://www.gc-cdn.com/assets/js/m2m_c .js – TheBlackBenzKid

@TheBlackBenzKid看到我的第二个工作示例！ –

要取消事件触发，你需要到return false;当你不希望提交您的形式你form()功能：

<input class="submitx" type="button" onClick="javascript:form();"/> 

function form() { 

    ....  

    if (flag == 1) { 
     return false; // this will cancel the click event firing on the submit button 
    } 
    else { 
     var submitForm; 
     submitForm = document.getElementById("m2mform"); 
     submitForm.submit(); 
    } 
}

来源

2011-11-17 11:05:01

我试过了，看上面的代码。 – TheBlackBenzKid

输入按钮不能在Jquery表格上工作

回答

相关问题