jQuery-validate Example

by vi161

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>
<form id="form" method="post" action="#">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email">Email</label>
    <input class="s" type="email" name="email" id="email" />
    
    <select class="sel er" id="sel" name="sel" title="6. No Cancer, Diabetes etc.">
                       <option value="" selected></option>
                       <option value="Yes">Yes</option>
                        <option value="No">No</option>
                    </select><br>
    <button type="submit">Submit</button>
     
</form>
<p class="msg-ok">
  форма отправлена
</p>
<p class="msg-no">
  error!!!
</p>

CSS

body {
    padding: 20px;
}

label {
    display: block;
}

select.error, input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}
.msg-ok {
  display: none;
}
.msg-no {
  /* display: none; */
}
button {
    display: block;
    margin-top: 20px;
}

JavaScript

$(document).ready(function () {
/* $.validator.addClassRules({
  sel: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  },
    submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            $(".msg-ok").css("display","block");
            return false; // for demo
            
        }
}); */
   
      $('button').click(function (){
       $("#form").validate({
        rules: {
        		"sel": {
                required: true,
            },
            "name": {
                required: true,
            },
            "email": {
                required: true,
                email: true
            }
        },
        messages: {
        		"sel": {
                required: ""
            },
            "name": {
                required: ""
            },
            "email": {
                required: "",
                email: ""
            }
        },
        submitHandler: function (form) { // for demo
            $(".msg-ok").css("display","block");
            return false; // for demo
            
        }
        
    });
         if ($('select').hasClass('error')) {
        		$('.msg-no').css("color","red");
	    }
      }); 


});