1

我对 JavScript 很陌生，我正在尝试通过切换所需的类来创建一个表单，该表单需要在标记复选框后将信息输入到字段中。我已经尝试了两天，如果选中“体育馆”框，则无法将“开始日期”设为必填字段。任何帮助都会很棒。

这是我到目前为止所拥有的：

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
    <script type="text/javascript">    

    $(document).ready(function(){
        $("#gym").change(function(){              
            $("#togg1").toggle(this.checked);
            $("#startDate").toggleClass("required");
            $("#endDate").toggleClass("required");
            $("#startTime").toggleClass("required");
            $("#endTime").toggleClass("required");

    if(this.checked){
           $("#startDate").attr('required','required');
           $("#endDate").attr('required','required');
           $("#startTime").attr('required','required');
           $("#endTime").attr('required','required');
      }
      else{
           $("#startDate").removeAttr('required')
           $("#endDate").removeAttr('required')
           $("#startTime").removeAttr('required')
           $("#endTime").removeAttr('required')
      }

        });
    });

    </script>


    </head>
    <body>


    <div id="courseForm" style="width: 500px; border: 1px solid #000; padding: 50px 0 50px 50px;margin: 0 auto;">
    <form id="serviceForm" action="#" onSubmit="required(this);" method="POST" enctype="text/plain">
    <input name="orgid" type="hidden" value="000001" />
    <input name="retURL" type="hidden" value="#" />
    <label for="company">* Agency Requesting Facility:</label>
    <br />
    <input id="company" required="required" maxlength="50" name="company" size="50" type="text" />
    <br />
    <br />
    <label for="name">* Agency Contact:</label>
    <br />
    <input id="name" required="required" maxlength="50" name="name" size="50" type="text" />
    <br />
    <br />
    <label for="phone">* Contact Phone Number:</label>
    <br />
    <input id="phone" required="required" maxlength="14" name="phone" size="14" type="text" />
    <br />
    <br />
    <br />Courses offered
    <br />

<input id="gym" name="gym" type="checkbox" value="1" />Gymnasium
    <br />
    <span id="togg1" style="display:none">
            <span id="togg2" style="display:inline">
                <lable for="startDate">* Start Date:</lable>
                    <input id="startDate" maxlength="10" name="startDate" size="10" />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="endDate">* End Date:</lable>
                    <input id="endDate" maxlength="10" name="endDate" size="10" /><br /><br />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="startTime">* Start Time:</lable>
                    <input for="startTime" maxlength="7" name="startTime" size="7" />
            </span>
            <span id="togg2" style="display:inline">
                <lable for="endTime">* End Time:</lable>
                    <input for="endTime" maxlength="7" mane="endTime" size="7" /><br />
            </span>
    </span>

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

2 回答 2

0

您在“onSubmit”中调用“必需”函数。这不是必要的和错误的，因为“必需”功能不存在。

然后，您必须添加以下行：

$("#serviceForm").validate();

在“$(document).ready”调用中，以便在 DOM 加载后执行。

这里有一个例子说明它是如何工作的：

http://jsfiddle.net/4rscN/

I have supposed you use the following plugin: http://docs.jquery.com/Plugins/Validation

If not, you have to add it.

For the validate plugin, I think you have to use the required class, not the required attribute. You are mixing class required with the attribute required, which is an attribute you can use in HTML5, but always take into account not all browsers support it.

For a good reference about this:

http://caniuse.com/#search=required

于 2013-03-29T19:21:50.667 回答
0

You forget to add 'required' attribute to 'Start Date'

$(document).ready(function(){
   $("#gym").change(function(){              
      $("#togg1").toggle(this.checked);
      $("#startDate").toggleClass("required");

      if(this.checked){
           $("#startDate").attr('required','required');
      }else{
           $("#startDate").removeAttr('required')
      }

   });
});
于 2013-03-29T19:21:57.190 回答