在输入字段中阻止提交没有文本

时间:2014-02-14 19:44:39

标签: javascript jquery forms css3

嗨我有一个基本的一个字段表单,带有一个提交按钮,它会自动清除onfocus上的文本,只允许使用数字。我希望它禁用提交,除非输入字段中存在数字,我希望它在输入字段中阻止提交没有文本。问题是按钮是一个实时链接。谢谢。

小提琴:http://jsfiddle.net/u3RZV/

    $(document).ready(function () {
        $("#quantity").keypress(function (e) {
            if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                $("#errmsg").html("Enter Valid Zip!").show().fadeOut("5000");
                return false;
            }
        });
    });

#errmsg {
    font:12px normal Futura, sans-serif;
    background:yellow;
    color:#444444;
}
.box {
    width: 85px;
    margin-bottom:10px;
}
.boxtwo {
    width: 160px;
}
input {
    width: 100%;
    background: #FFFFFF;
    border-radius: 4px;
    border: 2px solid #acd50b;
    padding: 10px 15px;
    text-align: center;
    -webkit-appearance: none;
    color: #999999;
    font-size: 11px;
}
input[type="focus"] {
    outline: none;
}
input[type="submit"] {
    border-radius: 4px;
    border: 2px solid #2d8b1b;
    -webkit-appearance: none;
    background: #acd50b;
    padding: 6px 10px;
    color: #444444;
    width: 100%;
    font-size: 18px;
    cursor:pointer;
}
<form action="">
    <div class="box">
        <input type="text" id="quantity" value="Enter Your Zip" /><span id="errmsg"></span>

    </div>
    <div class="boxtwo"> <a href="buttons.html">
             <input type="submit" id="signup" value="Compare"/>
          </a>

    </div>
</form>

1 个答案:

答案 0 :(得分:0)

$("form").on( "submit", function(e) {
    if ( !is_valid_zip( $("#quantity").val() ) ) {
        e.preventDefault();
    }
} );

编写is_valid_zip()函数取决于您。您可能还希望通过alert()或类似方式向用户显示错误消息。