停止输入元素验证的表单提交

时间:2012-06-21 19:44:30

标签: javascript validation zip

我对Javascript做的不多。

我要做的是有一个表格,用户可以输入他们的邮政编码,看看他们是否在一定数量的邮政编码(客户的服务区域)内。

如果他们的邮政编码在列表中,我想将它们发送到URL以安排约会。如果它不在列表中,我想要某种警告“抱歉,您的邮政编码不在我们的服务区域内”。

我有适应这种作品的东西,但无论他们输入什么,都会将用户发送到页面。

非常感谢任何帮助!

<form name = "myform" action="http://www.google.com/">
Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5" onchange = "checkZip()">
<button id="submit">Submit</button>
</form>

<script type = "text/javascript">
    function checkZip() {

        var z = document.myform.zip;
        var zv = z.value;
        if (!/^\d{5}$/.test(zv)) {
            alert("Please enter a valid Zip Code");
            document.myform.zip.value = "";
            myfield = z; // note myfield must be a global variable
            setTimeout('myfield.focus(); myfield.select();', 10); // to fix bug in
                                                                  // Firefox
            return false;
        }

        var codes = [ 12345, 12346, 12347, 12348, 12349, 12350 ]; // add as many
                                                                  // zip codes as
                                                                  // you like,
                                                                  // separated by
                                                                  // commas (no
                                                                  // comma at the
                                                                  // end)
        var found = false;
        for ( var i = 0; i < codes.length; i++) {
            if (zv == codes[i]) {
                found = true;
                break;
            }
        }

        if (!found) {
            alert("Sorry, the Zip Code " + zv + " is not covered by our business");
            document.myform.zip.value = "";
            return false;
        } else {
            alert("Press okay to go forward to schedule an appointment");
        }
    }
</script>

2 个答案:

答案 0 :(得分:4)

非提交按钮(简单)解决方案

<form name = "myform" action="http://www.google.com/">
    Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
    <button type="button" onclick="checkZip();" id="submit">Submit</button>
</form>

注意:一个类型为&#34;按钮&#34;的按钮是一个按钮,不提交w3c

并将checkZip()的最后一个块更改为:

if (!found) {
    alert("Sorry, the Zip Code " + zv + " is not covered by our business");
    document.myform.zip.value = "";
    //do nothing
} else {
    alert("Press okay to go forward to schedule an appointment");
    document.myform.submit();
}

我所做的更改如下:

  • 将onclick属性从input元素移动到提交按钮
  • 更改提交按钮,使其具有“按钮”类型,这使其成为按钮。按钮不会自动提交当前表格。

注意:这不会停止在输入元素内按Enter键提交表单的情况。你需要一个onSubmit =&#34;&#34;处理程序根据下一个处理该用例的解决方案。

提交按钮(简单)解决方案

<form name = "myform" action="http://www.google.com/" onsubmit="checkZip()">
    Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
    <button onclick="checkZip();" id="submit">Submit</button>
</form>

注意:默认情况下,没有类型的按钮是提交按钮w3c

并将checkZip()的最后一个块更改为:

if (!found) {
    alert("Sorry, the Zip Code " + zv + " is not covered by our business");
    return false;
} else {
    alert("Press okay to go forward to schedule an appointment");
    return true;
}

我所做的更改如下:

  • checkZip()调用移至表单
  • 上的onsubmit属性
  • checkZip()更改为返回true / false

更改解决方案

此解决方案最接近您的解决方案。然而,它增加了更多的复杂性:

表格:

<form name = "myform" action="http://www.google.com/" onsubmit="onFormSubmit();">
    Enter Your Zip Code
    <input type = "text" id="zipCode" name = "zip" size = "5" maxlength = "5" onchange = "onZipChange()">
    <button id="submit">Submit</button>
    <div id="invalidZipMsg" style="display:none;">
            Sorry, but we do not service your area.
    </div>
</form>

JavaScript:

/**
 * Returns true if we receive a valid zip code.
 * False otherwise.
 * 
 * @param zipCode The zip code to check
 * @returns True/fase if valid/invalid
 */
function isValidZip(zipCode){
    var validZipCodes = {'12345':true, 
                         '12346':true, 
                         '12347':true, 
                         '12348':true, 
                         '12349':true, 
                         '12350':true
                        };

    //can do other checks here if you wish
    if(zipCode in validZipCodes){
        return true;
    } else {
        return false;
    };
}

/**
 * Run on invalid zip code.
 * Disables form submission button and shows
 * error message.
 */
function invalidZipCode(){
    var invalidZipMsg = document.getElementById('invalidZipMsg');
    invalidZipMsg.style.display = "block";

    var submitButton = document.getElementById('submit');
    submitButton.disabled = 'true';
}

/**
 * Run on valid zip code. Enables form
 * submission button and hides the error message.
 * @returns
 */
function validZipCode(){
    var invalidZipMsg = document.getElementById('invalidZipMsg');
    invalidZipMsg.style.display = "none";

    var submitButton = document.getElementById('submit');
    submitButton.disabled = 'true';
}

/**
 * onChange handlers for the zip code input element.
 * Will validate the input value and then disable/enable
 * the submit button as well as show an error message.
 * @returns
 */
function onZipChange(){
    var zipCode = document.getElementById('zipCode');
    if(isValidZipCode(zipCode.value)){
        validZipCode();
    } else{
        invalidZipCode();
    };
}

/**
 * Run on form submission. Further behavior is the same
 * as @see onZipChange. Will stop form submission on invalid
 * zip code.
 */
function onFormSubmit(){
    var zipCode = document.getElementById('zipCode');

    if(isValidZipCode(zipCode.value)){
        validZipCode();
        return true;
    } else{
        invalidZipCode();
        return false;
    };
}

备注

有很多方法可以解决这个问题。我只选择了两个最容易的,我认为可以提供更好的用户体验。如果您的按钮没有提交,但提供其他不需要提交表单的操作,则非提交解决方案就是一个很好的示例。在我看来,最后一个用户体验最好,但这只是一个意见。

关闭主题

如果您有时间,我建议您查看许多可用的精美JavaScript库。它们通过简单的解决方案帮助引入复杂/高级问题,这些解决方案很有意义且很可能跨浏览器兼容。我按照我的偏好顺序建议:

但请注意,他们需要时间来理解。我知道在处理不是首要任务的项目时。

开始使用jQuery和JavaScript的最快方法是:First Flight。无论如何我都没有与codeschool.com联系,也没有从中获得任何利润。这个例子是免费的,这是我的团队为刚刚开始使用jQuery的人们在工作中传递的那个。

答案 1 :(得分:1)

我假设您的问题是即使邮政编码无效,用户仍然可以提交表单。

我建议将支票移到表格提交事件中,如此

<form name = "myform" action="http://www.google.com/" onsubmit = "checkZip()">
  Enter Your Zip Code <input type = "text" name = "zip" size = "5" maxlength = "5">
  <button id="submit">Submit</button> 
</form>

然后,当支票无法取消提交给google.com时,您可以返回false