Validation

Validation using jquery

by Brunno Romero

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<h1>Form Validation Example</h1>
<form id='registerForm' name='registerForm' method='post' action=''>
  <p>
    1º:
    <input type='text' class="toValidate" requiredIfAnothersField=".toValidate" />
  </p>
  <p>
    2º:
    <input type='text' class="toValidate" requiredIfAnothersField=".toValidate" />
  </p>
  <p>
    2º:
    <input type='text' class="toValidate" requiredIfAnothersField=".toValidate" />
  </p>
  <p>
    <input type='submit' name='Submit' value='Submit' />
  </p>
</form>

CSS

.error {
  font: normal 10px arial;
  padding: 3px;
  margin: 3px;
  background-color: #ffc;
  border: 1px solid #c00;
}

body {
  font-size: x-large;
  background: #CCC;
}

h1 {
  margin-bottom: 20px;
}

form {
  padding: 50px;
}

JavaScript

$(document).ready(function() {

  $.validator.addMethod("requiredIfAnothersField", function(value, element, param) {
    return (($(param).filter(function() {
      return $(this).val();
    }).length > 0) ? true : false);
  }, "");

  $("#registerForm").validate();

})

$.validator.addMethod("requiredIfAnothersField", function(value, element, param) {
  return (($(param).filter(function() {
    return $(this).val();
  }).length > 0) ? true : false);
}, "");