0

ユーザーが情報を入力し、質問への回答としてドロップダウン メニュー項目を選択するフォームとアンケートを HTML で作成しました。

問題は、必須のドロップダウン メニューを選択しないと、フィールドが必須であることを示すプロンプトがユーザーに表示されることです。そのドロップダウンを選択して [送信] をクリックすると、別の必要な投稿が印刷され、フォームはサンキュー ページに送信されません。送信を押し続けると、必要なフィールドが次々と投稿され続けます。以下は、私のサーバー上のフォームへのリンクです。

フォームへのリンク: 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>
4

1 に答える 1

-1

フォームを検証するために多くのコードを書いたようです... jquery-validation プラグインを使用した選択の検証は非常に簡単です。値が空のオプションがあることを確認する必要があります。そして、「必要な」クラスを選択に追加するだけです。

<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>

例を参照してください:検証例の選択

このように検証を行ってみてください。問題が解決するはずです。

于 2012-05-12T15:58:36.670 に答える