Validation has been applied to the form, and there are div elements within the input fields with corresponding IDs.
The goal is to display error messages within those divs. Specifically, if an input field is missing, the errorMessage should be set in the respective div before that input field.
An issue arises with the jquery.validate.js library inserting errors between radio elements, which affects the aesthetics of the layout.
Any suggestions on how to address this concern?
For Example (HTML):
<tr>
<td>
<label for='question2'>Some question</label>
</td>
<td valign='top'>
<input type='radio' name='question2' value='1'/>Answer1<br />
<input type='radio' name='question2' value='2'/>Answer2<br />
<input type='radio' name='question2' value='3'/>Answer3<br />
<input type='radio' name='question2' value='4'/>Answer4<br />
</td>
</tr>
<tr>
<td>
<div id='question23Error'></div>
//MESSAGE FOR EACH INPUT SHOULD BE INSERTED HERE INDIVIDUALLY
</td>
jQuery:
$(document).ready(function() {
$('#surveyData').validate({
errorContainer: '#errorbox', //PROBLEM WITH THIS CODE ON FORMS WITH MULTIPLE INPUTS
errorLabelContainer: '#errorbox ul', //
wrapper: 'li', //
rules: {
surname : {
required:true,
minlength: 2,
},
question1: {
required:true,
minlength: 2,
},
question2 : {
required: true,
},
question3 : {
required: true,
},
messages: {
surname : {
required: 'Enter surname!' ,
minlength: 'Surname should be longer!',
},
question1: {
required: 'Enter your opinion.',
minlength: 'Your opinion should be longer',
},
question2: {
required: 'Please choose radio button.',
},
question3: {
required: 'Please choose radio button',
},
},
};
});
});