M RSjakie
M RSjakie

Reputation: 1

jquery error placement in label

I have a dynamic form which build questions from sql db: The questiontext itself is in a label or legend. Below that the option or checkboxes or text input fields appear. After submit I check with jquery for errors but the placement of the error text is before or after the options or checkboxes or text fields. I want just an * after the questiontext. How can I get that?

Part of the html form code is as follow:

<table border=0 style="width:99%">
    <tr><td colspan="3">
    <form id="myform" method="post" action="processform.asp" name="myform" novalidate="novalidate">
    <%
    for i = 0 To ubound(arrVragen, 2)
        vraagnr = arrVragen(0,i)
        vragenlijstnr = arrVragen(1,i)
        vraagdispnr = arrVragen(2,i)
        vraagtype = arrVragen(3,i)
        vraag = arrVragen(vraagNLEN,i)
        vraagMandatory = arrVragen(6,i)
        vraagConditional = arrVragen(7,i)
        vraagVolgorde = arrVragen(8,i)
        if vraagMandatory=0 then
            req="&nbsp"
        else
            req="required"
        end if
        if vraagConditional = 1 then
            'lookup SourceCondition en TargetCondition en LogicSelect in arrConditionalLogic
            lookuplogic vraagnr
            'display vraag
            depends="q"&source&logic&"a"&answerinput
'response.write(depends)
            response.write("<fieldset class='form-question' data-depends-on="&depends&">")
            response.write("<label>" & vraagdispnr & ". &nbsp" & vraag & "<br/></label>")
            response.write("<label class='error'></label>")
        else
            'display vraag
            response.write("<fieldset class='form-question'>")
            response.write("<legend>" & vraagdispnr & ". &nbsp" & vraag & "</legend>")
            response.write("<label class='error'></label>")
        end if
        'display mogelijke antwoorden
        add_answer vraagnr, vraagtype, req
        response.write("</fieldset>")
    next

The jquery piece:

$(document).ready(function() { 
        $("#errmessage").hide();
        $("#myform").onsubmit = function (f) {
            f.preventDefault();
            }; 
        $("#myform").validate({
            errorPlacement: function (error, element) {
                $("#errmessage").show();
            error.insertBefore(element);
                //error.appendTo($('label[div="' + $(element).attr('id') + '"]', form));
                //error.insertBefore(element.parent());
                 //error.appendTo('#error');
                //error.insertAfter($(element).parents('label').prev($('.form-question'))); 
            },
            ignore: ":hidden",
        });
    });

It looks like this:

  1. Will the PhD-student continue with the project?

Yes

No

  1. Was the progress in the last year as planned?

Yes

No, the project is behind schedule

  1. Is there a plan for the upcoming year?

Yes

No

  1. Are delays expected for the upcoming year?

Yes

No

  1. Are there additional remarks about the progress of this promotion?

So I want the * as errormessage behind the question text instead of before or after the yes or no fields which is the standard.

Upvotes: 0

Views: 244

Answers (1)

M RSjakie
M RSjakie

Reputation: 1

Found out by myself: I put a span between the label/legend tags with class fielderr and then add this to the jquery code:

$("#myform").validate({
        errorPlacement: function (error, element) {
        ignore: ":hidden";
        $("#errmessage").show();
        element.parents(".form-question").find(".fielderr").append(error);

Upvotes: 0

Related Questions