<form class="cmxform" id="myshowErrors" class="form" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="" name="name" minlength="2" type="text" required>
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" required>
</p>
<p>
<label for="curl">Tel</label>
<input id="curl" type="tel" name="tel" required>
</p>
<p>
<label for="ccomment">Your comment (required)</label>
<textarea id="ccomment" name="comment" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
</fieldset>
</form>
.form__input_error{
border: 2px solid red;
}
$(document).ready(function () {
$("form").validate({
errorClass: "form__input_error",
validClass: "form__input_success",
// errorPlacement: function (error, element) {},
rules: {
// simple rule, converted to {required:true}
name: "required",
// compound rule
minlength: 2,
email: {
required: true,
email: true
}
},
messages: {
name: "Сообщение для имени",
email: {
required: "Вы не указали почту",
email: "Your email address must be in the format of name@domain.com"
},
tel: {
required: "Сообщение для телефона",
}
}
});
});
This Pen doesn't use any external CSS resources.