0

このコードを使用して郵便番号を検証しています。コードは魅力のように機能しますが、送信前に入力を検証し、入力が数値のみであることを確認したいと思います。これをコードに追加しました：

Code1 - 数値入力を検証するためのコード

 function validateForm() {
     var x = document.forms["form2"]["postal"].value;
     if(/[^0-9]+$/.test(x)) {
         alert("The postcode must have ONLY numeric characters - Please go to contact page if you live outside Australia.");
         myformName.myformField.focus();
         return false;
     }
 }

しかし、残念ながらうまくいきません。これで私を助けることができる人はいますか？上記のコードを以下のコードに統合する方法を知りたいです。

code2 - メインコード

$(document).ready(function () {
    $('#tab-container').easytabs();
});
var xmlHttp;

function check() {
    xmlHttp = GetXmlHttpObject();
    if(xmlHttp == null) {
        alert("Browser does not support HTTP Request");
        return;
    }
    var code = document.getElementById("postal").value;
    document.getElementById("loader4").style.visibility = 'visible';
    var url = "Ajax/check_code.php";
    url = url + "?p=" + code;
    //alert(code);
    xmlHttp.onreadystatechange = stateChanged;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);

    function stateChanged() {
        if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
            //alert(xmlHttp.responseText);
            if(xmlHttp.responseText == 1) {
                //alert(xmlHttp.responseText);
                //document.getElementById("pro").disabled = false; 
                window.location.href = 'booking.html';
            } else if(xmlHttp.responseText == 0) {
                document.getElementById("results").style.visibility = 'visible';
                document.getElementById("results").innerHTML = 'Alert Message';
            }
            document.getElementById("loader4").style.visibility = 'hidden';
        }
    }
}

function GetXmlHttpObject() {
    var xmlHttp = null;
    try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
    } catch(e) {
        //Internet Explorer
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xmlHttp;
}

ここにHTMLがあります：

<form name="form2" onsubmit="return validateForm();">
    <label>STEP 1:</label>
    <label>Enter Your Post Code</label>
    <input type="text" name="postal" placeholder="e.g. 4000" id="postal"  />
    <input type="button" class="call-to-action" name="pro" id="pro" onclick="check()" value="Book Now" />
</form>

繰り返しますが、code2 に code1 を追加して、数値検証を機能させたいと思います。

4

1 に答える 1

0

クリック ハンドラーをボタンにバインドし、AJAX 要求を送信する前に 4 桁の数字であるproことを最初に確認するコードの例を次に示します(ハンドラーを介して)。タグにを追加し、対応するボタンこれ。postcode$.get()Ajax/check_code.phpid<form>

HTML:

<div id="results"></div>
<form id="form2" name="form2" action="booking.html">
    <label>STEP 1:</label>
      <label>Enter Your Post Code</label>
      <input type="text" name="postal" placeholder="e.g. 4000" id="postal"  />
      <input type="button" class="call-to-action" name="pro" id="pro"  value="Book Now" />
</form>

jQuery を使用した Javascript:

$(document).ready(function () {
    //$('#tab-container').easytabs();
    $('#pro').on('click', function() {
        $('#results').hide();
        var $postal = $('input[name="postal"]');
        if (!/^[0-9]{4}$/.test($postal.val())) {
            alert("The postcode must have ONLY numeric characters - Please go to contact page if you live outside Australia.");
            $postal.focus();
            return false;
        }
        $.get('Ajax/check_code.php', {p: $postal.val()}, function(data) {
            if (data == 0) {
                // data = 0
                $('#results').html('Alert Message').show();
                return false;
            }

        });
    });
});

ここにJSFiddleがあります

于 2013-06-09T10:26:18.480 に答える