jQuery中的复杂表单验证

Question

我正在尝试验证表单，但不确定从哪里开始。

<form id="form1" name="form1" method="post">
  <p>
  <label for="sex">Sex</label>
<label for="sex">:</label>
<select name="sex" id="sex">
  <option value="">Please choose a sex</option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
</select>
</p>
<p>
<label for="select">Family:</label>
<select name="select" id="select">
  <option>Please choose a family</option>
  <option value="BFF">Bat/Flying Fox</option>
  <option value="F">Feral</option>
  <option value="FT">Frog/Turtle</option>
  <option value="LB">Land Bird</option>
  <option value="M">Macropod</option>
  <option value="OM">Mammal</option>
  <option value="MM">Marine Mammal</option>
  <option value="PG">Possum/Glider</option>
  <option value="BO">Owl</option>
  <option value="BR">Raptor</option>
  <option value="R">Rodent</option>
  <option value="WB">Sea Bird</option>
  <option value="HL">Snake/Reptile</option>
</select>
</p>
  <p>
  <label for="pouch">Pouch Condition:</label>
<select name="pouch" id="pouch">
  <option value="">Pouch Condition</option>
  <option value="Lactating">Lactating</option>
  <option value="Non-Lactating">Non-Lactating</option>
  <option value="N/A">N/A</option>
  <option value="Pinkie">Pinkie Attached</option>
</select>
</p>
<p>
<input type="button" name="button" id="button" value="Button">
</p>
</form>

我要做的是验证表单，以便如果有人从框中选择女性，并且家庭成员从家庭成员中获得的BFF，M，OM或PG值相等，则从邮袋条件中获得的值必须具有一个值。

我尝试了一些运气不好的事情，这超出了我的技能范围。

任何帮助，将不胜感激。

Answer 1

您可以使用简单的javascript或jQuery完成此操作。 从这里开始您的验证。

<script>
$( "#form1" ).submit(function( event ) {
var sex = $('#sex').val();
var family = $('#family').val();
var pouch = $('#pouch').val();

if ( sex == "Female" ) {
    if( (family == 'BFF' || family == 'M' || family == 'OM' || family == 'PG') && pouch = '' ) {
      alert('Please select pouch');
      return;
    }
}
  event.preventDefault();
});
</script>

Answer 2

请查看此小提琴

$(document).ready(function()
  {
    $("#button").click(function(){
        console.log('button clicked');
         if($( "#sex" ).val() == "Female")
           {
             console.log('sex is female clicked');
            if($( "#family" ).val() == "BFF" || $( "#family" ).val() == "M" || $( "#family" ).val() == "OM" || $( "#family" ).val() == "PG")
             { console.log('family clicked' + $( "#family" ).val());
               if($( "#pouch" ).val() == "")
                 {
                   console.log('pouch clicked' + $( "#pouch" ).val());
                   alert('select pouch');
                 }
             }
          }
     });
 });