CODEWITHSUNDEEP
javascriptjqueryformsvalidation
Rod
Rod

Reputation: 43

Complex Form Validation in jQuery

I'm trying to validate a form but not sure where to start.

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

What I'm trying to do is validate the form so that if someone selects female from the box and if the family equals BFF, M, OM or PG value from the family drop down a value from the pouch condition drop down must have a value.

I've tried a few things without much luck and its a bit outside my skill set.

Any help would be appreciated.

Upvotes: 0

Views: 310

Answers (2)

Janani M
Janani M

Reputation: 423

Kindly review this fiddle

$(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');
                 }
             }
          }
     });
 });

Upvotes: 1

RajivRisi
RajivRisi

Reputation: 398

You can do this using simple javascript or jQuery. Begin your validations from here.

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

Upvotes: 1

Related Questions