Question

I have two fields reference link and reference text that are added dynamically in the jquery modal dialog. the dialog is displayed when I click on add user. We can dynamically add and delete the reference text and link fields.

I acheived it using the following code

var $ctrl = $('<div id="refHolder'+i+'">'+  
            '<div class="form-row" style="padding-right: 10px;">        '+              
            '<div class="form-label" style="width: 180px;">'+
                '<label for="text">Reference Text '+labelCount+' </label>'+
            '</div>'+
            '<div>'+
                '<input id="links'+i+'text" class="w300" type="text" name="links'+i+'text" size="45" />'+
                '<a href="#" id="delRef'+i+'" style="float: right; border: none; color: #fff;" onClick="removeFormField('+i+'); return false;"><img src="./resources/images/delete.gif"></a>'+
            '</div> '+              
        '</div>'+
        '<div class="form-row"> '+              
            '<div class="form-label" style="width: 180px;">'+
                '<label for="link">Reference Link '+labelCount+'</label>'+
            '</div>'+
            '<div>'+
                '<input id="links'+i+'link"  class="url w300" type="text" name="links'+i+'link" size="45" />'+
            '</div>'+           
        '</div>'+
    '</div>');
    $("#referenceMain").append($ctrl);
    $('#hdnRefLinksCount').val(i+1);});

Now i have to validate the link field to check if it is a valid URL. I ve checked it using validation plugin. Now how to display specific error message for each link. eg: reference link 1 should be a valid url, reference link 2 should be a valid url.. etc.

Answer 1

Try something like below. Add a span with class error next to each element

$('#myform').validate({
        rules: {
            ddltest: {
                dropDownValidator: true
            },
            txttest: {
                required: true
            }
        },
        messages: {
            ddltest: { dropDownValidator: "Please select this" },
            txttest: { required: "Please enter some text" }
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.nextAll('.error'));
        }
    });