Trying to validate a form, canned error message is displaying behind the text, making it difficult to read..
Hi,
This is my first post to this forum, but I've been banging my head against the wall for a couple of days on something I'm guessing is a pretty simple fix. Building a app in node, using validate.js to validate some form entry. I can get the form question to error if there is no input, no problem, but the error message displays under the text of the question, making it nearly impossible to see.
Pic of current error:
In this pic, you can see that question 1 is not been filled out but question 2 and 3 have. When I try and submit, it overlays (or underlays) "This field is not required" but since there is no space, it's just putting it over the text. I really just need a visual indicator to the submitter that the field is missing a value. So a text string or Red X would be sufficient.
The code is written in Jade and bootstrap:
//q1
.row
.col-sm-4
label(for='q#{questions[0].formQuestionNumber}') <strong>#{questions[0].formQuestionNumber}. #{questions[0].questionText}</strong>
.col-sm-3
//.radio-inline
.radio
input(type='radio', name='q#{questions[0].formQuestionNumber}', id='q#{questions[0].formQuestionNumber}', value='0')
| Not/Hardly Ever True
.col-sm-3
//.radio-inline
.radio
input(type='radio', name='q#{questions[0].formQuestionNumber}', id='q#{questions[0].formQuestionNumber}', value='1')
| Somewhat/Sometimes True
.col-sm-2
//.radio-inline
.radio
input(type='radio', name='q#{questions[0].formQuestionNumber}', id='q#{questions[0].formQuestionNumber}', value='2')
| Very/Often True
Code in custom-validate.js:
//validate all fields on the scared form are filled out with responses
$('#scared-patient-form').validate({
rules:{
q1: {
required:true
},
q2: {
required:true
},
q3: {
required:true
}
},
errorElement: "em"
//success: function(element){
//element
//.text('OK!')
//.addClass('valid')
//}
});
Any help/thoughts would be appreciated.
Jonathan