Simple Validation

basic script

by Sparrow Squire

HTML

<div>
  <select id="cctype">
    <option val="">--</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
  </select>
   <div class="error-message"></div>
</div>
<div>
  <input type="text" id="ccnumber">
  <div class="error-message"></div>
</div>
<div>
  <select id="expiryDateM">
    <option val="">--</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
  </select>
  <select id="expiryDateY">
    <option val="">--</option>
    <option val="1">1</option>
    <option val="2">2</option>
    <option val="3">3</option>
  </select>
   <div class="error-message"></div>
</div>
<div>
  <input type="text" id="cvvnumber">
   <div class="error-message"></div>
</div>

<input id="cta" value="Complete" type="submit">

JavaScript

$('#cta').click(function() {
	
  if(cardValidation()) { 
      alert("SUCCESS");
  }
});

function cardValidation(){
    var inputVal = { 
    	cctype :  '*Card type required', 
      ccnumber : '*Card number required', 
      expiryDateM :'*Valid expiry date required',
      expiryDateY: '*Valid expiry date required',
      cvvnumber: '*Security number required' 
    }; 
    var error = false;
    var errors = [];

    $.each(inputVal, function( index, message ) {
        var element = '#' + index;
        console.log($(element).val());
        
        if($(element).val() === "" || $(element).val() === "--") {
            $(element).addClass('error');
            $(element).closest('.error-message').empty().append(message);
            errors[element] = true;
            error = true;
        }

        if(index != 'expiryDateM' && index != 'expiryDateY') {
            if( $(element).val() == ""  ){
                $(element).addClass('error');
                $(element).next('.error-message').empty().append(message);
                errors[element] = true;
                error = true;
            } 
        }
        
        if(!errors[element]){            
            $(element).removeClass('error');
            $(element).next('.error-message').empty();
        }
    });

    if(error) {
        return false;
    }  else {
        return true;
    }  
}