Как проверить радио и массив перед отправкой формы?

Question

Мне нужно проверить две вещи в этой форме: 1. Есть две переключатели: • ВАРИАНТ 1 - Функция щелчка скрывает поля мм / дд / гггг для ОПЦИИ 2 • ОПЦИЯ 2 - Функция щелчка показывает мм / дд /гггг поля, которые не требуются.2. Поле почтового индекса - необходимо проверить массив допустимых почтовых индексов.

У меня есть эта форма, Чаще всего работающая, за исключением нескольких проблем: 1. Если вы нажмете «Отправить», не проверив или не заполнив что-либо, что он заменитчасть текста на странице со словом «Недействительно» и наоборот, когда введена действительная информация. 2. Она не переходит на следующую страницу, если была отправлена ​​действительная информация.3. Он проверяет только поле почтового индекса и не требует переключателей.

Любая помощь будет принята с благодарностью!Спасибо!

Тестовая страница здесь: http://circleatseven.com/testing/jquery/zipcodevalidation/

Answer 1

Друг помог мне. Мы закончили с использованием плагина Jquery validate - вот что мы придумали:

<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>

Answer 2

Если я вас понимаю, вы ищете это:

У меня нет сообщения с «недействительным», я предупреждаю.

В вашем HTML добавьте "onsubmit" к вашей форме-тегу:

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

и добавьте кнопку submit в форму или триггер на своей кнопке pseudo-submit .submit() с помощью jQuery.

В вашем 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;}
        }