防止提交

Question

我想在用户输入数字或特殊字符时阻止提交数据。我用过这个。下面

//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中。

Answer 1

通过防止特殊字符和空白字段完成您的代码。只是尝试实现像这样......

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> 

Answer 2

更新后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> 

UPDATED DEMO

Answer 3

你需要的是 “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

Answer 4

你需要的是不依赖于JavaScript当有理智的可用选项。

比较墙上的代码，这样：

<input type="text" pattern="[a-zA-Z]+" required /> 

突然，只允许字母，甚至不会提交，直到你输入的东西！

是不是HTML5真棒？

Answer 5

首先测试一下，看看字符串是否包含任何数字。如果是，则将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。