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 はおそらく手に負えないほど手に負えませんが、私は JavaScript でのプログラミングに非常に慣れていないため、まだ学ぶことがたくさんあります。あらゆる助けに感謝します。これを書くためのより良い方法があれば、私はあらゆる提案を受け入れます。

**更新-ここでは、実際のフォームのフィドルです

4

1 に答える 1

1

Javascript/jQuery を使用してフォームを検証するのは初めてのようです。

jQuery.validate などの jQuery プラグインを使用して、フォームのフロント エンドを検証することをお勧めします。このプラグインは、検証が Internet Explorer を含む複数のブラウザーで機能することを保証します。

おすすめの記事:

  1. 基本的な JQuery フォーム検証の例 (2 分)

また、フロントエンドの検証は戦いの半分にすぎないことを忘れないでください。バックエンドも検証する必要があります。フォーム データ処理スクリプトに渡されるデータのセキュリティと有効性を確保するため。

于 2013-04-10T03:11:55.820 に答える