防止提交
我想在用户输入数字或特殊字符时阻止提交数据。我用过这个。下面 防止提交
//restric entering numbers and special characters
function checkLetters() {
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
}
else {
$('#cropEr4').hide();
boolsub = true;
}
//Entering special characters
if (crop.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
return false;
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
return false;
}
}
是形式。
<form name="myForm" action="../controller/new.php" method="POST"
enctype="multipart/form-data" onSubmit="return validateSubmit()">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols, have to enter only letters.</div>
<div id="cropEr4" style="display:none;color:red">You cannot enter numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
</td>
</tr>
</tbody>
</table>
谁能告诉我，为什么这不起作用？当我输入数字和特殊字符时，显示消息，但它仍然在提交表格。 我正在将此代码加载到facebox中。
通过防止特殊字符和空白字段完成您的代码。只是尝试实现像这样......
HTML：
<form name="myForm" action="../controller/new.php" method="POST" enctype="multipart/form-data" onSubmit="return validateSubmit()">
<input type="text" name="crop_id" value=""size="45" id="crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
<div id="message" style="color:red;"></div>
</form>
JS代码：
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
//prevent submitting
function validateSubmit(){
var crop = $('#crop');
var sh = $('#message');
if(bv(crop,sh) === true && sc(crop,sh) === true){
return true;
}else{
return false;
}
}
function bv(e,sh){
var a = e.val().trim();
//Entering blank characters
if (a == ""){
sh.html('Blank not allowed.');
return false;
}else{
sh.html('');return true;
}
}
function sc(e,sh){
var b = e.val().trim();
//Entering special characters
if (b.match(/([0-9,!,%,&,@,#,$,^,*,?,_,~])/)){
sh.html('Allows only characters.');
return false;
}else{
sh.html('');return true;
}
}
</script>
这显然适用于你，只是试图实现。 – 2014-09-13 11:12:36
非常感谢你@Rocky，yey！有用 ！！ :) – huz 2014-09-13 11:37:06
你好，你的欢迎。 – 2014-09-13 11:45:35
更新后OP的评论
var boolsub = true;
function checkLetters() {
var crop = $('#crop').val().trim();
if ((crop.match(/([0-9])/)) || (crop.match(/([!,%,&,@,#,$,^,*,?,_,~])/))) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var chek = 0;
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
return true;
}
else {
return false;
}
}
else {
$('#cropEr2').show();
return false;
}
}
<form id="form1" runat="server" action="abc.html">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols or numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" onclick="return validateSubmit()" />
</td>
</tr>
</tbody>
</table>
</form>
你只是想通过在文本输入中按回车来提交表单来绕过客户端验证吗？ – Quentin 2014-09-13 09:24:43
如果通过其他方式提交表单，某些浏览器将在提交按钮上触发点击事件。我不想依赖它，它是一个不太优雅的解决方案。原来的代码[作品]（http://jsbin.com/lufofuzadoba/1/）无论如何，所以你的改变当然不能解决问题。 – Quentin 2014-09-13 09:33:39
@Quentin：它不起作用。检查你的代码'paste bin'。输入一些数字，按提交，它不会第一次，但再次按提交按钮具有相同的值，它会提交。 – 2014-09-13 09:37:51
你需要的是 “event.preventDefault（）”：如果此方法被调用时，事件的默认动作将不会被触发。
并添加一个事件提交按钮。
$("#submit").click(function(event) {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
event.preventDefault()
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
event.preventDefault()
}
});
您可以删除此行：的onsubmit = “返回validateSubmit（）”
http://jsfiddle.net/#&togetherjs=L2vRaIkMNT
你需要的是不依赖于JavaScript当有理智的可用选项。
比较墙上的代码，这样：
<input type="text" pattern="[a-zA-Z]+" required />
突然，只允许字母，甚至不会提交，直到你输入的东西！
是不是HTML5真棒？
如果世界只使用HTML5这将是一个合理的问题的答案。 JQuery的全部内容都是关于世界上其他机器的工作:) – 2014-09-13 09:27:16
现在是我们停止使用古老的Web浏览器的时候了。客户端验证对于用户来说只是一种方便，因此投入大量时间来编写大量的JS代码以获取HTML本地化的功能，这为缩小少数派提供了方便。 – Quentin 2014-09-13 09:35:31
首先测试一下，看看字符串是否包含任何数字。如果是，则将boolsub设置为false，否则将其设置为true。
然后您测试它是否包含任何特殊字符。如果是，则将boolsub设置为false，否则将其设置为true。
你为数字测试设置了boolsub为何值。您总是为特殊字符测试覆盖该值。
默认设置为boolsub到true。如果检查失败，请将其设置为false。如果通过支票，千万不要将其重置为true。
function checkLetters() {
boolsub = true;
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
} else {
$('#cropEr4').hide();
}
//Entering special characters
if (crop.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
} else {
$('#cropEr3').hide();
}
}
但是请注意，你会过得更好重写这个让checkLetters返回的值，而不是设置一个全球性的，并使用modern event binding techniques。
它看起来像'boolsub'需要在最外面的范围。 – DevlshOne 2014-09-13 09:18:23
如果使用jQuery，请勿使用onclick/onsubmit属性。使用jQuery连接事件。它允许多个处理程序，并且更容易维护代码。 – 2014-09-13 09:21:54
查看你的JavaScript错误控制台。它说什么？ （请注意，您可能必须对其进行配置，以允许消息自表单提交并加载新页面以来持久存在）。 – Quentin 2014-09-13 09:26:20