1

嗨，我让我的脚本正常工作，然后我通过 w3 验证器运行它并更改了我告诉我的错误，现在它在第一个邮政编码处停止验证，我已经塞满了，不记得发生了什么变化，bigg 教训一次做一件事，我一直在拔头发试图让它再次工作，但不知道是否有任何 1 可以花时间看它，我将不胜感激，谢谢

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Joes Fruit and Vegetable Store</title>
        <script>
            //calender dropdown menu 
            var monthtext = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];

            function populatedropdown(dayfield, monthfield, yearfield) {
                var today = new Date()
                var dayfield = document.getElementById(dayfield)
                var monthfield = document.getElementById(monthfield)
                var yearfield = document.getElementById(yearfield)
                for (var i = 0; i < 31; i++)
                dayfield.options[i] = new Option(i, i + 1)
                dayfield.options[today.getDate()] = new Option(today.getDate(), today.getDate(), true, true) //select today's day
                for (var m = 0; m < 12; m++)
                monthfield.options[m] = new Option(monthtext[m], monthtext[m])
                monthfield.options[today.getMonth()] = new Option(monthtext[today.getMonth()], monthtext[today.getMonth()], true, true) //select today's month
                var thisyear = today.getFullYear()
                for (var y = 0; y < 20; y++) {
                    yearfield.options[y] = new Option(thisyear, thisyear)
                    thisyear += 1
                }
                yearfield.options[0] = new Option(today.getFullYear(), today.getFullYear(), true, true) //select today's year
            }
            // function validate
            function validate_form() {
                valid = true;
                // validate name
                /*   if ( document.input.name.value == "" )
        {
                alert ( "Please enter your name" );
                valid = false;
        }
                                                                // validate address
                if ( document.input.address.value == "" )
        {
                alert ( "Please enter your address address" );
                valid = false;
        }                                                       
                                                                // validate suburb town
                if ( document.input.town.value == "" )
        {
                alert ( "Please enter your Suburb or town" );
                valid = false;
        } 


                                                            // validate postcode        

        var y = document.getElementById("postcode").value;
       if(isNaN(y)||y.indexOf(" ")!=-1)
       {
          alert("Postcode must be in numbers.");
          document.getElementById("postcode").focus();
          return false;
       }

       if (y.length>4 || y.length<4)
       {
            alert("Postcode should be 4 digit");
            document.getElementById("postcode").focus();
            return false;
       }  
        */
                // validate home phone
                var y = document.getElementById('hphone').value;
                if (isNaN(y) || y.indexOf(" ") != -1) {
                    alert("Home Phone number must be in numbers.");
                    document.getElementById('hphone').focus();
                    return false;
                }
                if (y.length > 10 || y.length < 10) {
                    alert("Home Phone number should be 10 digit");
                    document.getElementById('hphone').focus();
                    return false;
                }
                // validate work phone
                var y = document.getElementById('wphone').value;
                if (isNaN(y) || y.indexOf(" ") != -1) {
                    alert("work Phone number must be in numbers.");
                    document.getElementById('wphone').focus();
                    return false;
                }
                if (y.length > 10 || y.length < 10) {
                    alert("Work Phone number should be 10 digit");
                    document.getElementById('wphone').focus();
                    return false;
                }
                // validate fax
                var y = document.getElementById('fax').value;
                if (isNaN(y) || y.indexOf(" ") != -1) {
                    alert("Fax number must be in numbers.");
                    document.getElementById('fax').focus();
                    return false;
                }
                if (y.length > 10 || y.length < 10) {
                    alert("Fax Phone number should be 10 digit");
                    document.getElementById('fax').focus();
                    return false;
                }
                // validate email   
                {
                    var x = document.forms["input"]["email"].value;
                    var atpos = x.indexOf("@");
                    var dotpos = x.lastIndexOf(".");
                    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                        alert("Not a valid e-mail address");
                        return false;
                    }
                }
                // validate radio buttons
                var o = document.getElementById('rad1');
                var t = document.getElementById('rad2');
                if ((o.checked == false) && (t.checked == true)) {
                    // validate alternative address
                    if (document.input.street.value == "") {
                        alert("Please enter alternative address address");
                        valid = false;
                    }
                    // validate suburb town
                    if (document.input.suburb.value == "") {
                        alert("Please enter alternative Suburb or town");
                        valid = false;
                    }
                } // validate postcode  
                var y = document.getElementById('postcode2').value;
                if (isNaN(y) || y.indexOf(" ") != -1) {
                    alert("Postcode must be in numbers.");
                    document.getElementById('postcode2').focus();
                    return false;
                }
                if (y.length > 4 || y.length < 4) {
                    alert("Alternative Postcode should be 4 digit");
                    document.getElementById('postcode2').focus();
                    return false;
                }
                // validate message box
                var o = document.getElementById('card');
                if ((o.checked == true)) {
                    if (document.input.message.value == "") {
                        alert("Please enter message");
                        valid = false;
                    }
                    return valid;
                }
            }
        </script>
    </head>

    <body>  <b>Order form for Joe's Fruit Shop</B><br><br>

<b> * means you must fill in the details.</B><br><br>
<b>Your details:</b>
        <br>
        <br>
        <!-- Beggining of Form -->
        <form name="input" action="cal2.html" onsubmit="validate_form ()">
            <!--name form -->* Name:
            <input type="text" name="name" onclick="this.value='';" value="Enter your name with first">
            <br>
            <br>
            <!-- Address form -->* Address:
            <input type="text" name="address" onclick="this.value='';" value="Enter your street address">
            <br>
            <br>
            <!-- Suburb state dropdown form-->* Suburb or Town:
            <input type="text" name="town" onclick="this.value='';"
            value="suburb">State:
            <select name="state">
                <option value="NSW">NSW</option>
                <option selected="selected" value="QLD">QLD</option>
                <option value="SA">SA</option>
                <option value="WA">WA</option>
                <option value="TAS">TAS</option>
                <option value="VIC">VIC</option>
                <option value="NT">NT</option>
                <option value="ACT">ACT</option>
            </select>
            <!-- post code form -->* Postcode:
            <input type=text name="postcode" onclick="this.value='';" value="****">
            <br>
            <br>
            <!-- Home phone form-->* Phone:
            <input type=text name="hphone" onclick="this.value='';" value="x-xxxx-xxx">
            <!-- work phone form -->Work phone
            <input type=text name="wphone" onclick="this.value='';" value="x-xxxx-xxx">
            <br>
            <br>
            <!-- Fax form-->*Fax:
            <input type=text name="fax" onclick="this.value='';" value="0x-xxxx-xxx">
            <!-- Email form-->Email address:
            <input type=text name="email" onclick="this.value='';" onsubmit="return validateForm();"
            value="Enter your current email">
            <br>
            <br>
            <br>
            <!-- credit card--> <b>Credit card details:</b>
            <br>
            <br>* Type:
            <select name="credit card">
                <option selected="selected" value="AMEX">Amex</option>
                <option value="Visa">Visa</option>
                <option value="Mastercard">Mastercard</option>
            </select>*Expiry date:
            <select name="expiration_month">
                <option value="">Choose...</option>
                <option selected="selected" value="1">January</option>
                <option value="2">Febuary</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
            <select name="expiration_year">
                <option value="">Choose...</option>
                <option selected="selected" value="2012">2012</option>
                <option value="2013">2013</option>
                <option value="2014">2014</option>
                <option value="2015">2015</option>
                <option value="2016">2016</option>
                <option value="2017">2017</option>
                <option value="2018">2018</option>
                <option value="2019">2019</option>
                <option value="2020">2020</option>
            </select>
            <br>
            <br>
             <B>Purchase details</B><br><br>                                    <!-- Product dropdown form-->
* Product:
<select name="product">
<option value="carrot">Bag of carrots</option>
<option value="zucchini">Zucchini</option>
<option value="cabbage">Cabbage</option>
<option value="grapes">Grapes</option>
<option value="tomatoes">TAS</option>
<option value="apples">Apples</option>
<option value="banana">banana</option>
<option selected="selected" value="cucumber">Cucumber</option>
</select>
                                                                <!-- Quantity dropdown form-->
Quantity:
<select name="quantity">
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>

<br><br><br>
* <B>Deliver to:</B>
<br><br>
                                                                    <!-- Address Radio buttons-->
<input type='radio' id="rad1" name='radio' value='Home address'  checked="checked">Home Address<br>
<input type='radio' id="rad2" name='radio' value='Other address'/>Other Address<br><br>

                                                                    <!--other address-->

                                                                    <!-- street form-->
Street <input type=text name="street" onclick="this.value='';" value="Street"><br><br>
                                                                    <!-- Suburb form-->
Suburb <input type=text name="suburb" onclick="this.value='';" value="Suburb or town"><br><br>
                                                                    <!-- State dropdown form-->
State <select name="state">
<option value="NSW">NSW</option>
<option selected="selected" value="QLD">QLD</option>
<option value="SA">SA</option>
<option value="WA">WA</option>
<option value="TAS">TAS</option>
<option value="VIC">VIC</option>
<option value="NT">NT</option>
<option value="ACT">ACT</option>
</select><br><br>
                                                                <!-- post code form -->
Postcode:<input type=text name="postcode2" onclick="this.value='';" value="****"><br><br><br>

* Date delivery required:
                                                                    <!-- Calender drop down menu-->

<select id="daydropdown">
</select> 
<select id="monthdropdown">
</select> 
<select id="yeardropdown">
</select> 


<script type="text/javascript">

//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
window.onload=function(){
populatedropdown("daydropdown", "monthdropdown", "yeardropdown")
}
</script>

                                                                    <br><br>
                                                                    <!-- include a card option-->

Include a card: <input type="checkbox" name="card" value="Yes">Yes<br><br>
Personal message on card: <textarea rows="10" name="message" cols="30" onclick="this.value='';" >Enter your personal message here</textarea><br><br>
Click on <b>Submit</b> when done; click on <b> Clear form</b> to reset.
            <!-- submit button-->
            <input type="submit" value="Submit">
            <!-- reset button-->
            <input type="reset" value="Reset">
        </form>
    </body>

</html>
4

1 回答 1

0

当您尝试通过 Id 获取元素并检查 null 的 value 属性时，您的脚本失败了。

 var y = document.getElementById('hphone').value;

这会引发异常并退出，然后表单提交

给你的元素 ID 以匹配 name 属性，它应该没问题

 <input type=text name="hphone" id="hphone" onclick="this.value='';" value="x-xxxx-xxx">

将您的 onsubmit 属性更改为以下以取消提交验证错误

<form name="input" action="cal2.html" onsubmit="return validate_form ()">

要检查默认值，您可以添加数据属性并交叉检查验证中的值。

* Phone: <input type=text name="hphone" id="hphone" onclick="this.value='';" data-default="x-xxxx-xxx" value="x-xxxx-xxx"> 

var element = document.getElementById('hphone');
var y = element.value;
var defValue = element.attributes["data-default"].value;

if(isNaN(y)||y.indexOf(" ")!=-1|| y === defValue )
{
    alert("Home Phone number must be in numbers.");
    document.getElementById('hphone').focus();
    return false;
}

如果您的目标是兼容 HTML5 的浏览器，则可以使用 placeholder 属性。 http://www.w3schools.com/html5/att_input_placeholder.asp

于 2012-11-05T01:52:57.330 回答