防止提交

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。