Как проверить ul и li для выбора списка с помощью validate plugin

Question

Мне нужно использовать ul li для выбора, потому что для этого нужно сделать какой-то стиль, но, к сожалению, я не могу использовать проверку для этого, потому что не элемент ввода.

эта форма является мульти форма, здесь какая-то часть моего кода

<form id="my-form" class="mwf-form" method="POST" action=""> 

    <fieldset id="email-id"> 
     <div class="row"> 
     <div class="col-md-6"> 

      <ul class="psa_form_area"> 

      <li class="mwf-field"> 
       <p>Please enter your e-mail address</p> 
      </li> 

      <li data-mwf-container="email-add" class="mwf-field"> 
       <label class="mwf-label" for="email-add"> 
       E-mail</label> 
       <span class="mwf-required">*</span> 
       <div class="mwf-input"> 

       <input id="email-add" name="email-add" class="mwf-text line ptm " type="email"> 

       </div> 
      </li> 

      </ul> 


      <ul> 

      <li data-mwf-container="next" class="mwf-button mwf-next"> 

       <input type="button" value="Continue" id="next-button" data-mwf-id="next" class="next" name="next"> 

      </li> 

      </ul> 
     </div> 
     </div> 
    </fieldset> 
    <fieldset id="personal_information"> 

     <ul> 
     <li class="mwf-field"> 
      <h3>Personal data</h3> 
     </li> 
     </ul> 

     <ul class="psa_form_area"> 
     <div class="row"> 
      <div class="col-md-6"> 
      <li data-mwf-container="email-add" class="mwf-field"> 
       <label class="mwf-label" for="email-add"> 
       E-mail</label> 
       <div class="mwf-input"> 
       <input id="email-add2" readonly="readonly" style="border:0" type="text"> 
       </div> 
      </li> 
      </div> 

     </div> 
     <div class="row"> 
      <div class="col-md-6"> 


      <li data-mwf-container="country" class="mwf-field"> 
       <label class="mwf-label" for="country"> 
       Country 
       <span class="mwf-required">*</span> 
       </label> 
       <div class="dropdown mwf-input custom-select open" id="selectCountry"> 
       <button id="mybtn" class="button-dropdown" type="button" data-toggle="dropdown" aria-expanded="true"> 
        <span class="button-text selected">Select Country...</span> 
       </button> 
       <ul class="dropdown-menu option" role="menu" id="dropdown" name="country" required="" aria-required="true"> 
        <li id="dropdw" class="dropdown-header">Select Country:</li> 
        <li id="1"><a href="#" btattached="true">Albania</a></li> 
        <li id="2"><a href="#" btattached="true">Austria</a></li> 
        <li id="3"><a href="#" btattached="true">Belgium</a></li> 
        <li id="4"><a href="#" btattached="true">Bosnia and Herzegovina</a></li> 
        <li id="5"><a href="#" btattached="true">Bulgaria</a></li> 
        <li id="6"><a href="#" btattached="true">Croatia</a></li> 
       </ul> 
       </div> 
      </li> 
      </div> 
      <div class="col-md-6"> 
      <li data-mwf-container="lang" class="mwf-field"> 
       <label class="mwf-label" for="lang"> 
       Language 
       </label> 
       <span class="mwf-required">*</span> 
       <div class="dropdown mwf-input custom-select" id="selectLang"> 
       <button id="mybtn" class="button-dropdown" type="button" data-toggle="dropdown"> 
        <span class="button-text selected">Select Language...</span> 
       </button> 
       <ul class="dropdown-menu option" role="menu" id="dropdown"> 
        <li id="dropdw" class="dropdown-header">Select Languange:</li> 
        <li id="1"><a href="#">German</a></li> 
        <li id="2"><a href="#">English</a></li> 
        <li id="3"><a href="#">Dutch</a></li> 
       </ul> 
       </div> 
      </li> 
      </div> 
     </div> 
     <div class="row"> 
          <div class="col-md-6"> 
           <li data-mwf-container="fname" class="mwf-field"> 
            <label class="mwf-label" for="fname"> 
            First name</label> 

            <div class="mwf-input"> 
             <input id="fname" name="fname" class="mwf-text line ptm " type="text"> 
            </div> 
           </li> 
          </div> 
          <div class="col-md-6"> 
           <li data-mwf-container="lname" class="mwf-field "> 
            <label class="mwf-label" for="lname"> 
            Last name</label> 
            <span class="mwf-required">*</span> 
            <div class="mwf-input"> 
             <input id="lname" name="lname" class="mwf-text line ptm " type="text"> 
            </div> 
           </li> 
          </div> 
         </div> 
     </ul> 
     <ul class="psa_form_area"> 
             <li data-mwf-container="_cancel_EN5138" class="mwf-button mwf-reset"> 
              <input type="reset" value="Reset" 
              data-mwf-submit="{&quot;type&quot;:&quot;cancel&quot;}" 
              data-mwf-id="_cancel_EN5138" > 
             </li> 
             <li data-mwf-container="submit" class="mwf-button mwf-submit"> 
              <input type="button" value="Submit" data-mwf-id="submit" class="submit" name="submit" > 
             </li> 
            </ul> 
    </fieldset> 
    </form> 
    <fieldset id="confirm"> 
    <p>Thank you very much for your registration! An automatic e-mail response has been sent to {{email}} 
    </p> 
    </fieldset> 

JQuery кода

$(".mwf-next, .mwf-submit").click(function(){ 
    form.validate({ 
      errorElement: 'span', 
      errorClass: 'help-block', 
      highlight: function(element, errorClass, validClass) { 
      $(element).closest('.mwf-field').addClass("has-error"); 

      }, 
      unhighlight: function(element, errorClass, validClass) { 
      $(element).closest('.mwf-field').removeClass("has-error"); 
      }, 
      errorPlacement: function(error, element) { 
      if (element.parent('.mwf-option').length) { 
       error.insertAfter(element.parent()); 
      } else { 
       error.insertAfter(element); 
      } 
      }, 
      rules: { 
      'email-add': { 
       required: { 
       depends: function() { 
        $(this).val($.trim($(this).val())); 
        return true; 
       } 
       }, 
       email: true 
      }, 
      country: { 
       selectList: true, 
       required: true 

      }, 

      lname: { 
       required: true 
      }, 

      lang: { 
       required: true 
      } 


      }, 

      messages: { 
      'email-add': { 
       required: "Please enter an email address", 
       email: "Please enter a valid email address" 
      }, 
      country: { 
       required: "Please select country" 

      }, 


      lname: { 
       required: "Last name required" 
      }, 

      lang: { 
       required: "Languange required" 
      } 


      } 
     }); 
     $('ul#dropdown').each(function() { 
      $(this).find('ul#dropdown').find('li').each(function() { 
      if ($(this).selected === "0") { 
       //alert("please select"); 
      } else { 
       $(this).closest('.mwf-field').removeClass('has-error'); 
      } 
      }); 
     }); 
     if ($("ul#dropdown li.selected").length > 0) { 
      var le = $('ul#dropdown li.selected'); 
      //alert(le .length); 
     } 
     if (form.valid() === true) { 
      if ($('#email-id').is(":visible")) { 
      current_fs = $('#email-id'); 
      next_fs = $('#personal_information'); 
      } else if ($('#personal_information').is(":visible")) { 
      current_fs = $('#personal_information'); 
      next_fs = $('#confirm'); 
      } 
      next_fs.show(); 
      current_fs.hide(); 
      email1 = $('#email-add').val(); 
      email2 = $('#email-add2').val(email1); 
      email2.css("font-weight", "Bold"); 
      var template = "<p>Thank you very much for your registration An automatic e-mail response has been sent to <strong>" + email1 + " </strong></p>"; 
      //var html = Mustache.to_html(template); 
      $('#confirm').html(template); 
     } 


     }); //end function validate 

    }); 

Как решить эту проблему? любая альтернатива для этого?

вот мой полный код: https://jsfiddle.net/jCos/7y7rj9eq/7/

жаль, что я не знаю, как включить стиль шрифта в jsfiddle, поэтому список выбора не кажется правильно.

Заранее спасибо.

Answer 1

вам нужно будет найти id этого li, как это ..

$('#dropdown li.selected').attr('id');

это даст вам выбранное значение li т.е. id в вашем случае, дать bydefault id="0" к <li id="dropdw" class="dropdown-header">Select Country:</li> этой li, так что вы можете проверить или можете также проверить dropdw.