防止提交

时间：2014-09-13 09:08:35

标签： javascript jquery forms

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

//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中加载此代码。

5 个答案:

答案 0 :(得分：0)

当您有更好的选择时，您需要的是不依赖JavaScript。

将您的代码墙与此对比：

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

突然它只允许字母，甚至在你输入内容之前都不会提交！

HTML5不是很棒吗？

答案 1 :(得分：0)

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

答案 2 :(得分：-1)

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

答案 3 :(得分：-1)

你需要的是＆＃34; event.preventDefault（）＆＃34; ::如果调用此方法，则不会触发事件的默认操作。

添加提交按钮的事件。

$( "#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 =＆＃34; return validateSubmit（）＆＃34;

http://jsfiddle.net/#&togetherjs=L2vRaIkMNT

enter image description here

答案 4 :(得分：-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 CODE： 

<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>
相关问题
最新问题