Hey there, I've made an update to the fiddle but let me clarify what I'm trying to achieve. My goal is not to implement form validation as I already have that covered with the HTML5 "required" attribute. What I'm aiming for is to customize the styling of ".error" which appears when jQuery validate detects a user input error. How can I manage the style of this element without it being controlled by the jQuery validate function?
FIDDLE: http://jsfiddle.net/xvAPY/140/
$('#contactForm').validate({ // initialize the plugin
errorElement: 'div',
rules: {
first_name: {
required: true,
},
last_name: {
required: true,
}
postal_code: {
required: true,
},
phone_primary: {
required: true,
}
email: {
required: true,
}
},
submitHandler: function(form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
<form id="contactForm" method="POST" action="https://app.leadconduit.com/v2/PostLeadAction">
<input type="text" id="first_name" name="first_name" minlength="5" maxlength="255" placeholder="First Name" required />
<input type="text" id="last_name" name="last_name" minlength="2" maxlength="255" placeholder="Last Name" required />
<input type="hidden" id="state" name="state" value="" />
<input type="text" id="postal_code" name="postal_code" minlength="5" maxlength="10" placeholder="Zip Code" required />
<input type="text" id="phone_primary" name="phone_primary" minlength="11" maxlength="12" placeholder="Phone" required />
<input type="text" id="email" name="email" minlength="25" maxlength="255" placeholder="Email" required />
<input type="submit" value="Submit"/>