Is there a way to append the jQuery Validation error messages to the input field or get help with positioning them properly?
The random popping up of error messages is causing chaos in the form layout.
I prefer to have the error messages displayed underneath each input field.
$(document).ready(function() {
$('#register-form').validate({
errorClass: 'error',
rules: { //set rules for specific inputs
name: {
required: true,
lettersonly: true
},
email: { //refers to the inputs name
required: true,
email: true
},
subject: {
required: true,
lettersonly: true,
},
workground: {
required: true,
lettersonly: true,
},
text: {
required: true,
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form action="php/PHPMailer/send-mail.php" method="post" id="register-form">
<input class="contact-input-type1" name="name" placeholder="Name" autocomplete="off">
<input class="contact-input-type1" name="email" placeholder="E-Mail-Adresse" autocomplete="off">
<input class="contact-input-type2" name="subject" placeholder="Anliegen" autocomplete="off">
<input class="contact-input-type2" name="workground" placeholder="Metier" autocomplete="off">
<textarea maxlength="300" class="contact-textarea" name="text" placeholder="Nachricht" autocomplete="off"></textarea>
<input type="submit" class="contact-submit" value="Abschicken">
</form>