Question

我已经在HTML中创建了一个表单和调查，用户将在其中填写信息并选择下拉菜单项作为问题的答案。

问题在于，在未选择所需的下拉菜单后，系统会提示用户该字段是必需的。如果他们现在选择下拉并点击提交，则会打印另一个必填帖子，表单不会发送到感谢页面。如果你继续点击提交它只是一个接一个地发布必填字段。下面是我服务器上表单的链接。

LINK TO FORM： http://amckeedesignportfolio.com/eLearningModule/newForm.php

这是我的HTML

<h3>
  1. How often do you have a patient who resists oral care? 
  <span style="padding-left:25px;"></span>
</h3>
<br/>
<select name="question1" class="surveySelection1_class">
  <option value=""selected="selected">--select--</option>
  <option value="Never">Never</option>
  <option value="Rarely">Rarely</option>
  <option value="Sometimes">Sometimes</option>
  <option value="Always">Always</option>
</select>

<h3>
  2. How often do you have a patient bite on oral swabs with oral care? 
  <span style="padding-left:25px;"></span>
</h3>
<select name="question2" class="surveySelection2_class">
  <option value=""selected="selected">--select--</option>
  <option value="Never">Never</option>
  <option value="Rarely">Rarely</option>
  <option value="Sometimes">Sometimes</option>
  <option value="Always">Always</option>
</select>

这里是JAVASCRIPT

<script type="text/javascript">
$(document).ready(function(){
  // validate signup form on keyup and submit
  $("#contactForm").validate({
    rules: {
      fName: "required",
      lName: "required",
      telephone: "required",
      email: {
        required: true,
        email: true
      },
      telephone: {
        required: true,
        phoneUS: true
      },
      position      : "required",
      hospital      : "required",
      hospitalCity  : "required",
      hospitalState : "required",
      floor         : "required",
      experience    : "required",
      question1     : "required",
      question2     : "required",
      question3     : "required",
      question4     : "required",
      question5     : "required",
      question6     : "required",
      question7     : "required",
      question8     : "required",
      question9     : "required",
      question10    : "required",
      question11    : "required",
    },

    messages: {
      fName        : "Please enter your firstname.",
      lName        : "Please enter your lastname.",
      telephone    : "Please enter a valid telephone number.",
      email        : "Please specify a valid email address.",
      position     : "Please enter your current position.",
      hospitalCity : "Please enter your current hospital.",
      floor        : "Please enter the current floor or area you work.",
    }
  });

  /* state validation*/
  $validator.addMethod(
    "state_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please select a state."); 

  /* experience validation*/
  $validator.addMethod(
    "selection_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please share your experience with us."); 

  /* question1 validation*/
  $validator.addMethod(
    "surveySelection1_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer."); 

  /* question2 validation*/
  $validator.addMethod(
    "surveySelection2_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question3 validation*/
  $validator.addMethod(
    "surveySelection3_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question4 validation*/
  $validator.addMethod(
    "surveySelection4_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question5 validation*/
  $validator.addMethod(
    "surveySelection5_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question6 validation*/
  $validator.addMethod(
    "surveySelection6_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question7 validation*/
  $validator.addMethod(
    "surveySelection7_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question8 validation*/
  $validator.addMethod(
    "surveySelection8_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question9 validation*/
  $validator.addMethod(
    "surveySelection9_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question10 validation*/
  $validator.addMethod(
    "surveySelection10_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");

  /* question11 validation*/
  $validator.addMethod(
    "surveySelection11_class",
    function(value, element) {
      return this.optional(element) || ( value.indexOf("") == -1);
    },
    "Please choose an answer.");
}); 
</script>

Answer 1

您似乎已经写了很多代码来验证您的表单...... 使用jquery-validation插件验证select非常简单。您必须确保有一个空值的选项。然后你只需将“必需”类添加到选择中。

<select id="mySelect" class="required">
  <option value="">--select--</option>
  <option value="value1">option 1</option>
  <option value="value2">option 2</option>
  <option value="value3">option 3</option>
</select>

参见例子：select validation example

尝试像这样进行验证，它应该可以解决您的问题。

jquery验证器下拉菜单验证在选择和提交后不断添加所需的字段

1 个答案: