多页面webform验证

时间:2015-07-23 22:17:45

标签: javascript jquery html webforms business-catalyst

问题:

我在Business Catalyst中创建了一个webform,我已经自定义了这个webform,因此我在静态页面上有多个实例。

首先,我创建了几个包含表单部分的div:

<form name="catwebformform23079" method="post" onsubmit="return checkWholeForm23079(this)" enctype="multipart/form-data" action="/FormProcessv2.aspx?WebFormID=446040&OID={module_oid}&OTYPE={module_otype}&EID={module_eid}&CID={module_cid}"> <span class="req">*</span> Required

      {module_ccsecurity}

            <div class="web1"><label for="CAT_Custom_1433316">ARRIVAL <span class="req">*</span>
            </label>
            <br />
            <input type="text" name="CAT_Custom_1433316" id="dpd1" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433316');return false;" />

            <label for="CAT_Custom_1433317">DEPARTURE <span class="req">*</span>
            </label>
            <br />
            <input type="text" name="CAT_Custom_1433317" id="dpd2" class="cat_textbox" readonly="readonly" onfocus="displayDatePicker('CAT_Custom_1433317');return false;" />

            <label for="CAT_Custom_1433318">Bedrooms: <span class="req">*</span>
            </label>
<br /> 
            <select name="CAT_Custom_1433318" id="CAT_Custom_1433318" style="width:100%;" style="width:100%;" class="pretty-select">
                <option value=""></option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>

            <label for="CAT_Custom_1433319">Adults <span class="req">*</span>
            </label>
            <br />
            <select name="CAT_Custom_1433319" id="CAT_Custom_1433319" style="width:100%;" class="pretty-select">
                <option value=""></option>
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select></div>

           <div class="web2"> <label for="CAT_Custom_1433320">Children <span class="req">*</span>
            </label>
            <br />
            <select name="CAT_Custom_1433320" id="CAT_Custom_1433320" style="width:100%;" class="pretty-select">
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>

            <label for="CAT_Custom_1433321">Pets <span class="req">*</span>
            </label>
            <br />
            <select name="CAT_Custom_1433321" id="CAT_Custom_1433321" style="width:100%;" class="pretty-select">
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </select>

            <label for="CAT_Custom_1433324">Parking <span class="req">*</span>
            </label>
            <br />
            <select name="CAT_Custom_1433324" id="CAT_Custom_1433324" style="width:100%;" class="pretty-select"> 
                <option value=""></option>
                <option value="Yes">Yes</option>
                <option selected="selected" value="No">No</option>
            </select>
      </div>
            <div class="web3"><label for="CAT_Custom_1433322">Name <span class="req">*</span>
            </label>
            <br />
            <input type="text" maxlength="4000" name="CAT_Custom_1433322" id="CAT_Custom_1433322" class="cat_textbox" />

            <label for="CAT_Custom_1433323">Surname <span class="req">*</span>
            </label>
            <br />
            <input type="text" maxlength="4000" name="CAT_Custom_1433323" id="CAT_Custom_1433323" class="cat_textbox" />

            <label for="WorkPhone">Work Phone Number <span class="req">*</span>
            </label>
            <br />
            <input type="text" name="WorkPhone" id="WorkPhone" class="cat_textbox" maxlength="255" />

            <label for="EmailAddress">Email Address <span class="req">*</span>
            </label>
            <br />
            <input type="text" name="EmailAddress" id="EmailAddress" class="cat_textbox" maxlength="255" />

            <input class="cat_button" type="submit" value="Submit" id="catwebformbutton" />
 </div>
<script type="text/javascript" src="/CatalystScripts/ValidationFunctions.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript" src="/CatalystScripts/Java_DatePicker.js?vs=b1677.r461496-phase1"></script>
<script type="text/javascript">
    //<![CDATA[
    var submitcount23079 = 0;

    function checkWholeForm23079(theForm) {
            var why = "";
            if (theForm.WorkPhone) why += isEmpty(theForm.WorkPhone.value, "Work Phone Number");
            if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
            if (theForm.CAT_Custom_1433316) why += checkDate(theForm.CAT_Custom_1433316.value, "ARRIVAL");
            if (theForm.CAT_Custom_1433317) why += checkDate(theForm.CAT_Custom_1433317.value, "DEPARTURE");
            if (theForm.CAT_Custom_1433318) why += checkDropdown(theForm.CAT_Custom_1433318.value, "Bedrooms:");
            if (theForm.CAT_Custom_1433319) why += checkDropdown(theForm.CAT_Custom_1433319.value, "Adults");
            if (theForm.CAT_Custom_1433320) why += checkDropdown(theForm.CAT_Custom_1433320.value, "Children");
            if (theForm.CAT_Custom_1433321) why += checkDropdown(theForm.CAT_Custom_1433321.value, "Pets");
            if (theForm.CAT_Custom_1433324) why += checkDropdown(theForm.CAT_Custom_1433324.value, "Parking");
            if (theForm.CAT_Custom_1433322) why += isEmpty(theForm.CAT_Custom_1433322.value, "Name");
            if (theForm.CAT_Custom_1433323) why += isEmpty(theForm.CAT_Custom_1433323.value, "Surname");
            if (why != "") {
                alert(why);
                return false;
            }
            if (submitcount23079 == 0) {
                submitcount23079++;
                theForm.submit();
                return false;
            } else {orm.CAT_Custom_1433321) why 
                alert("Form submission is in progress.");
                return false;
            }
        }
        //]]>
</script>

正如您所看到的,该网站分为3个部分:.web1 .web2 .web3

我也有按钮#hide1#hide2隐藏和替换.web1和.web2

    // JavaScript Document
$('#hide').click(function(){
    if($.trim($('.web1 :input').val()) == ''){
        $.each().alert('PLEASE FILL IS ALL FIELDS.');
    }
    else {

        $(".web1").hide();
        $(".web2").show();
        $("#hide").hide();
        $("#hide2").show();

    }
}
                );

// JavaScript Document
$('#hide2').click(function(){
    if($.trim($('.web2 :input').val()) == ''){
        $.each().alert('PLEASE FILL IS ALL FIELDS.');
    }
    else {

        $(".web2").hide();
        $(".web3").show();
        $("#hide2").hide();

    }
}
                 );


$('.web2').hide();
$('.web3').hide();
$('#hide2').hide();

正如您在单击按钮时可以看到的那样,他们假设在进入下一个div之前验证div中的输入值。

我尝试了这个但似乎没有验证所有表单输入。关于如何解决这个问题的任何帮助?

0 个答案:

没有答案