Question

我需要在此表单上验证两件事： 1.有两个单选按钮： •选项1 - 单击功能会隐藏选项2的mm / dd / yyyy字段 •选项2 - 点击功能显示不需要的mm / dd / yyyy字段。 2.邮政编码字段 - 需要验证可接受的邮政编码数组。

我有这个形式，主要是在几个问题上工作： 1.如果您单击“提交”而未检查或填写任何内容，则会在填写有效信息时将页面上的某些文本替换为“无效”，反之亦然。 2.如果提交了有效信息，则不会转到下一页。 3.它只验证邮政编码字段，不需要单选按钮。

任何帮助将不胜感激！谢谢！

此处的测试页：http://circleatseven.com/testing/jquery/zipcodevalidation/

Answer 1

如果我了解你，请搜索：

我没有写过“无效”的消息，我发出警报。

在您的HTML中为表单添加“onsubmit”标签：

<form method="post" action="success.php" id="step1" onsubmit="checkdata();">

并使用jQuery在您的表单上添加一个submit-Button或触发伪提交按钮.submit()。

在您的Javascript中添加以下功能：

function checkdata() {
            if ($(":radio:checked").length < 1) {
                alert('Please choose an Option!');
                return false;
            }
            zipCodeOk = false;
            zipCodes = new Array(75001, 75002, 75006); //Your Zip-Codes
            for (var i = 0; i <= zipCodes.length; i++) {
                if ($('#enterZip').val() == zipCodes[i]) { 
                    zipCodeOk = true;
                    break;
                }
            }
            if (!zipCodeOk) {alert('Please enter a valid Zip-Code!');return false;}
        }

Answer 2

一位朋友帮助了我..我们最终使用了Jquery验证插件 - 这就是我们想出的：

<script type="text/javascript">
    $(document).ready(function(){

        jQuery.validator.addMethod("validZip", function(value) {
            var zips=['12345', '23456', '34567', '45678', '56789', '67890', '78901', '89012', '90123', '01234'];
            if ($.inArray(value,zips) > -1) {
                return true;
            } else {
                return false;
            }

        }, "invalid zip");

        $("#step1").validate({
            rules: {
                currentServiceStatus: "required",
                enterZip: { validZip : true }
            }
        });

        $('.moveInDates').hide();
        $(":radio:eq(0)").click(function(){
            $('.moveInDates').hide();
        });
        $(":radio:eq(1)").click(function(){
            $('.moveInDates').show();
        });

    });
</script>

这是html：

<form method="post" action="success.php" id="step1">

<h1>CHOOSE *</h1>
<input name="currentServiceStatus" type="radio" value="Switch Me" /> OPTION 1
<br/>
<input name="currentServiceStatus" type="radio" value="Move-In" /> OPTION 2 (reveals more fields on click)

<div id="dateInputs" class="moveInDates">
    <h2>Move-In Date (not required)</h2>
    <p><span class="mmddyyyy"><input name="moveInDateMonth" type="text" class="text" id="moveInDateMonth" /> / <input name="moveInDateDay" type="text" class="text" id="moveInDateDay" /> / <input name="moveInDateYear" type="text" class="text" id="moveInDateYear" /></span>
</div>

<hr/>

<h1>ZIP CODE *</h1>
<p>Enter one of the following acceptable Zip Codes:</p>
<p>12345, 23456, 34567, 45678, 56789, 67890, 78901, 89012, 90123, 01234</p>

<input name="enterZip" type="text" class="text" id="enterZip" />

<hr/>

<input type="image" id="submitButton" src="http://circleatseven.com/testing/jquery/zipcodevalidation/library/images/btn_submit.jpg" />
<p><em>* Required</em></p>

</ul>

如何在提交表单之前验证无线电和阵列？

2 个答案: