0

我正在尝试构建一个表单，该表单将在选中复选框时验证字段。它适用于除 IE 之外的所有浏览器。关于让它在 IE 中也能工作的任何建议？

<form id="serviceForm" action="MAILTO:myemail@me.com" onSubmit="required(this);" method="POST" enctype="text/plain">
        <label for="AgencyRequesting">*Agency Requesting Facility:</label>
        <br />
        <input id="AgencyRequesting" required="required" maxlength="50" name="Agency Requesting Facility" size="50" type="text" />
        <br />
        <br />
        <label for="AgencyContact">*Agency Contact:</label>
        <br />
        <input id="AgencyContact" required="required" maxlength="50" name="Agency Contact" size="50" type="text" />
        <br />
        <br />
        <label for="AgencyPhone">*Contact Phone Number:</label>
        <br />
        <input id="AgencyPhone" required="required" maxlength="14" name="Agency Phone Number" size="14" type="text" />
        <br />
        <br />
        <br />*Area of Facility Requesting: 
        <br /><p style="font-size:.8em;padding:0;">(If interested in reserving the range for your agency, please complete the form below and submit to us.  Once we  receive it, we will email you confirmation and availability.)<br />
            (** Submitting this form does NOT secure your reservation on our facility, it is merely a request.)</p>
        <br />

<!--Gymnasiun checkbox
    *********************************************************************************************************-->  
<input id="gym" name="Gymnasium" type="checkbox" value="Checked" />Gymnasium
    <br />
    <span id="togggym" style="display:none;">
            <span id="togg2" style="display:inline;">
                <lable for="gymStartDate">*Start Date:</lable>
                    <input id="gymStartDate" maxlength="10" name="Start Date" size="10" />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="gymEndDate">*End Date:</lable>
                    <input id="gymEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="gymStartTime">*Start Time:</lable>
                    <input id="gymStartTime" maxlength="7" name="Start Time" size="7" />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="gymEndTime">*End Time:</lable>
                    <input id="gymEndTime" maxlength="7" name="End Time" size="7" /><br />
            </span>
    </span>
<!--Classroom checkbox
    *********************************************************************************************************-->
<input id="classroom" name="Classroom" type="checkbox" value="Checked" />Classroom
    <br /> 
    <span id="toggclass" style="display:none;">
            <span id="togg2" style="display:inline;">
                <lable for="classStartDate">*Start Date:</lable>
                    <input  id="classStartDate" maxlength="10" name="Start Date" size="10" />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="classEndDate">*End Date:</lable>
                    <input id="classEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="classStartTime">*Start Time:</lable>
                    <input id="classStartTime" maxlength="7" name="Start Time" size="7" />
            </span>
            <span id="togg2" style="display:inline;">
                <lable for="classEndTime">*End Time:</lable>
                    <input id="classEndTime" maxlength="7" name="End Time" size="7" /><br />
            </span>
    </span>
<!--Upper checkbox
    *********************************************************************************************************-->
<input id="upper" name="Upper Track" type="checkbox" value="Checked" />Upper Track
<input id="lower" name="Lower Track" type="checkbox" value="Checked" />Lower Track
<input id="both" name="Both Upper and Lower Track" type="checkbox" value="Checked" />Both
    <br /> 
    <span id="toggupper" style="display:none;">
        <span id="togg2" style="display:inline;">
            <lable for="upperStartDate">*Start Date:</lable>
                <input  id="upperStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="upperEndDate">*End Date:</lable>
                <input id="upperEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="upperStartTime">*Start Time:</lable>
                <input id="upperStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="upperEndTime">*End Time:</lable>
                <input id="upperEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--Lower Checkbox
    *********************************************************************************************************-->
    <span id="togglower" style="display:none;">
        <span id="togg2" style="display:inline;">
            <lable for="lowerStartDate">*Start Date:</lable>
                <input  id="lowerStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="lowerEndDate">*End Date:</lable>
                <input id="lowerEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="lowerStartTime">*Start Time:</lable>
                <input id="lowerStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="lowerEndTime">*End Time:</lable>
                <input id="lowerEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--Both checkbox
    *********************************************************************************************************-->
    <span id="toggboth" style="display:none;">
        <span id="togg2" style="display:inline;">
            <lable for="bothStartDate">*Start Date:</lable>
                <input  id="bothStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="bothEndDate">*End Date:</lable>
                <input id="bothEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="bothStartTime">*Start Time:</lable>
                <input id="bothStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="bothEndTime">*End Time:</lable>
                <input id="bothEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--East Pistol Checkbox
    *********************************************************************************************************-->
<input id="east" name="East Pistol" type="checkbox" value="Checked" />East Pistol
    <br />
    <span id="toggeast" style="display:none;">
        <span id="togg2" style="display:inline;">
            <lable for="eastStartDate">*Start Date:</lable>
                <input  id="eastStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="toggeast" style="display:inline;">
            <lable for="eastEndDate">*End Date:</lable>
                <input id="eastEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="toggeast" style="display:inline;">
            <lable for="eastStartTime">*Start Time:</lable>
                <input id="eastStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="toggeast" style="display:inline;"
            <lable for="eastEndTime">*End Time:</lable>
                <input id="eastEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--West Pistol Checkbox
    *********************************************************************************************************-->
<input id="west" name="West Pistol" type="checkbox" value="Checked" />West Pistol
    <br /> 
    <span id="toggwest" style="display:none">
        <span id="togg2" style="display:inline;">
            <lable for="westStartDate">*Start Date:</lable>
                <input  id="westStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="westEndDate">*End Date:</lable>
                <input id="westEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="westStartTime">*Start Time:</lable>
                <input id="westStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="westEndTime">*End Time:</lable>
                <input id="westEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--Rifle Checkbox
    *********************************************************************************************************-->
<input id="rifle" name="Rifle" type="checkbox" value="Checked" />Rifle
    <br /> 
    <span id="toggrifle" style="display:none">
        <span id="togg2" style="display:inline;">
            <lable for="rifleStartDate">*Start Date:</lable>
                <input  id="rifleStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="rifleEndDate">*End Date:</lable>
                <input id="rifleEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="rifleStartTime">*Start Time:</lable>
                <input id="rifleStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="rifleEndTime">*End Time:</lable>
                <input id="rifleEndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--360 Range Checkbox
    *********************************************************************************************************-->
<input id="360" name="360 Range" type="checkbox" value="Checked" />360&#176 Range
    <br /> 
    <span id="togg360" style="display:none">
        <span id="togg2" style="display:inline;">
            <lable for="360StartDate">*Start Date:</lable>
                <input  id="360StartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="360EndDate">*End Date:</lable>
                <input id="360EndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="360StartTime">*Start Time:</lable>
                <input id="360StartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="360EndTime">*End Time:</lable>
                <input id="360EndTime" maxlength="7" name="End Time" size="7" /><br />
        </span>
    </span>
<!--Sims Trailers Checkbox
    *********************************************************************************************************-->
<input id="sims" name="Sims Trailers" type="checkbox" value="Checked" />Sims Trailers
    <br /> 
    <span id="toggsims" style="display:none">
        <span id="togg2" style="display:inline;">
            <lable for="simsStartDate">*Start Date:</lable>
                <input  id="simsStartDate" maxlength="10" name="Start Date" size="10" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="simsEndDate">*End Date:</lable>
                <input id="simsEndDate" maxlength="10" name="End Date" size="10" /><br /><br />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="simsStartTime">*Start Time:</lable>
                <input id="simsStartTime" maxlength="7" name="Start Time" size="7" />
        </span>
        <span id="togg2" style="display:inline;">
            <lable for="simsEndTime">*End Time:</lable>
                <input id="simsEndTime" maxlength="7" mane="End Time" size="7" /><br />
        </span>
    </span>

    <br />
    <br />
    <label for="description">Comments:</label>
    <br />
    <textarea name="Comments" cols="40" rows="5"></textarea>
    <br />
    <br />* denotes required fields
    <br />
    <input type="submit" id="submit" value="SUBMIT" />
</form>

这是JavaScript

/*Gym
    ********************************************************************************/
    $(document).ready(function(){
        $("#gym").change(function(){              
            $("#togggym").toggle(this.checked);
            $("#gymStartDate").toggleClass("required");
            $("#gymEndDate").toggleClass("required");
            $("#gymStartTime").toggleClass("required");
            $("#gymEndTime").toggleClass("required");

    if(this.checked){
           $("#gymStartDate").attr('required','required');
           $("#gymEndDate").attr('required','required');
           $("#gymStartTime").attr('required','required');
           $("#gymEndTime").attr('required','required');
      }
      else{
           $("#gymStartDate").removeAttr('required')
           $("#gymEndDate").removeAttr('required')
           $("#gymStartTime").removeAttr('required')
           $("#gymEndTime").removeAttr('required')
      }

        });
    });
/*Classroom
    *******************************************************************************/
    $(document).ready(function(){
        $("#classroom").change(function(){              
            $("#toggclass").toggle(this.checked);
            $("#classStartDate").toggleClass("required");
            $("#classEndDate").toggleClass("required");
            $("#classStartTime").toggleClass("required");
            $("#classEndTime").toggleClass("required");

    if(this.checked){
           $("#classStartDate").attr('required','required');
           $("#classEndDate").attr('required','required');
           $("#classStartTime").attr('required','required');
           $("#classEndTime").attr('required','required');
      }
      else{
           $("#classStartDate").removeAttr('required')
           $("#classEndDate").removeAttr('required')
           $("#classStartTime").removeAttr('required')
           $("#classEndTime").removeAttr('required')
      }

        });
    });
/*Upper
    *******************************************************************************/
        $(document).ready(function(){
        $("#upper").change(function(){              
            $("#toggupper").toggle(this.checked);
            $("#upperStartDate").toggleClass("required");
            $("#upperEndDate").toggleClass("required");
            $("#upperStartTime").toggleClass("required");
            $("#upperEndTime").toggleClass("required");

    if(this.checked){
           $("#upperStartDate").attr('required','required');
           $("#upperEndDate").attr('required','required');
           $("#upperStartTime").attr('required','required');
           $("#upperEndTime").attr('required','required');
      }
      else{
           $("#upperStartDate").removeAttr('required')
           $("#upperEndDate").removeAttr('required')
           $("#upperStartTime").removeAttr('required')
           $("#upperEndTime").removeAttr('required')
      }

        });
    });
/*lower
    *******************************************************************************/
        $(document).ready(function(){
        $("#lower").change(function(){              
            $("#togglower").toggle(this.checked);
            $("#lowerStartDate").toggleClass("required");
            $("#lowerEndDate").toggleClass("required");
            $("#lowerStartTime").toggleClass("required");
            $("#lowerEndTime").toggleClass("required");

    if(this.checked){
           $("#lowerStartDate").attr('required','required');
           $("#lowerEndDate").attr('required','required');
           $("#lowerStartTime").attr('required','required');
           $("#lowerEndTime").attr('required','required');
      }
      else{
           $("#lowerStartDate").removeAttr('required')
           $("#lowerEndDate").removeAttr('required')
           $("#lowerStartTime").removeAttr('required')
           $("#lowerEndTime").removeAttr('required')
      }

        });
    });
/*Both
    *******************************************************************************/
        $(document).ready(function(){
        $("#both").change(function(){              
            $("#toggboth").toggle(this.checked);
            $("#bothStartDate").toggleClass("required");
            $("#bothEndDate").toggleClass("required");
            $("#bothStartTime").toggleClass("required");
            $("#bothEndTime").toggleClass("required");

    if(this.checked){
           $("#bothStartDate").attr('required','required');
           $("#bothEndDate").attr('required','required');
           $("#bothStartTime").attr('required','required');
           $("#bothEndTime").attr('required','required');
      }
      else{
           $("#bothStartDate").removeAttr('required')
           $("#bothEndDate").removeAttr('required')
           $("#bothStartTime").removeAttr('required')
           $("#bothEndTime").removeAttr('required')
      }

        });
    });
/*East Pistol
    *******************************************************************************/
        $(document).ready(function(){
        $("#east").change(function(){              
            $("#toggeast").toggle(this.checked);
            $("#eastStartDate").toggleClass("required");
            $("#eastEndDate").toggleClass("required");
            $("#eastStartTime").toggleClass("required");
            $("#eastEndTime").toggleClass("required");

    if(this.checked){
           $("#eastStartDate").attr('required','required');
           $("#eastEndDate").attr('required','required');
           $("#eastStartTime").attr('required','required');
           $("#eastEndTime").attr('required','required');
      }
      else{
           $("#eastStartDate").removeAttr('required')
           $("#eastEndDate").removeAttr('required')
           $("#eastStartTime").removeAttr('required')
           $("#eastEndTime").removeAttr('required')
      }

        });
    });
/*West Pistol
    *******************************************************************************/
        $(document).ready(function(){
        $("#west").change(function(){              
            $("#toggwest").toggle(this.checked);
            $("#westStartDate").toggleClass("required");
            $("#westEndDate").toggleClass("required");
            $("#westStartTime").toggleClass("required");
            $("#westEndTime").toggleClass("required");

    if(this.checked){
           $("#westStartDate").attr('required','required');
           $("#westEndDate").attr('required','required');
           $("#westStartTime").attr('required','required');
           $("#westEndTime").attr('required','required');
      }
      else{
           $("#westStartDate").removeAttr('required')
           $("#westEndDate").removeAttr('required')
           $("#westStartTime").removeAttr('required')
           $("#westEndTime").removeAttr('required')
      }

        });
    });
/*Rifle
    *******************************************************************************/
        $(document).ready(function(){
        $("#rifle").change(function(){              
            $("#toggrifle").toggle(this.checked);
            $("#rifleStartDate").toggleClass("required");
            $("#rifleEndDate").toggleClass("required");
            $("#rifleStartTime").toggleClass("required");
            $("#rifleEndTime").toggleClass("required");

    if(this.checked){
           $("#rifleStartDate").attr('required','required');
           $("#rifleEndDate").attr('required','required');
           $("#rifleStartTime").attr('required','required');
           $("#rifleEndTime").attr('required','required');
      }
      else{
           $("#rifleStartDate").removeAttr('required')
           $("#rifleEndDate").removeAttr('required')
           $("#rifleStartTime").removeAttr('required')
           $("#rifleEndTime").removeAttr('required')
      }

        });
    });
/*360 Range
    *******************************************************************************/
        $(document).ready(function(){
        $("#360").change(function(){              
            $("#togg360").toggle(this.checked);
            $("#360StartDate").toggleClass("required");
            $("#360EndDate").toggleClass("required");
            $("#360StartTime").toggleClass("required");
            $("#360EndTime").toggleClass("required");

    if(this.checked){
           $("#360StartDate").attr('required','required');
           $("#360EndDate").attr('required','required');
           $("#360StartTime").attr('required','required');
           $("#360EndTime").attr('required','required');
      }
      else{
           $("#360StartDate").removeAttr('required')
           $("#360EndDate").removeAttr('required')
           $("#360StartTime").removeAttr('required')
           $("#360EndTime").removeAttr('required')
      }

        });
    });
/*Sims Trailers
    *******************************************************************************/
        $(document).ready(function(){
        $("#sims").change(function(){              
            $("#toggsims").toggle(this.checked);
            $("#simsStartDate").toggleClass("required");
            $("#simsEndDate").toggleClass("required");
            $("#simsStartTime").toggleClass("required");
            $("#simsEndTime").toggleClass("required");

    if(this.checked){
           $("#simsStartDate").attr('required','required');
           $("#simsEndDate").attr('required','required');
           $("#simsStartTime").attr('required','required');
           $("#simsEndTime").attr('required','required');
      }
      else{
           $("#simsStartDate").removeAttr('required')
           $("#simsEndDate").removeAttr('required')
           $("#simsStartTime").removeAttr('required')
           $("#simsEndTime").removeAttr('required')
      }

        });
    });

JavaScript 可能非常失控，但我对使用它进行编程非常陌生，还有很多东西要学。感谢您提供的所有帮助，如果有更好的方法来写这个，我愿意接受每一个建议。

**Update-Here 是对实际表单的一个小技巧

4

1 回答 1

1

看来您是使用 Javascript/jQuery 验证表单的新手。

我建议使用 jQuery.validate 之类的 jQuery 插件来验证您的表单前端。该插件将确保验证工作跨浏览器，包括 Internet Explorer。

推荐文章：

  1. 基本的 JQUERY 表单验证示例（2 分钟）

另外，不要忘记前端验证只是成功的一半，您还需要验证后端！确保传递给表单数据处理脚本的数据的安全性和有效性。

于 2013-04-10T03:11:55.820 回答