Pergunta

In the error message, I want to add the current,next or previous control's label in the error message. Eg when I Click the checkbox It should shows "Please select a value for first name"

DEMO but this is not working

<div class="content-area">
  <form action="" method="post" id="Form1" name="Form1">
    <input id="rd1" name="rd1" type="checkbox" />
    <label for="rd1">First Name</label>
    <textarea id="txt1" name="txt1" maxlength="10"></textarea>
    <input type="submit" id="submit" value="SAVE " data-mini="true" />
  </form>
</div>

function GetErrorMesage() {
  var aa = this.attr("id");
  return "Please eneter a value for " + aa;
}

function submitForm() {
 $('#Form1').validate({
    onfocusout: false,
    onkeyup: false,
    ignore: "",
    rules: {
        rd1: {
            required: true
        },
        txt1: {
            required: {
                depends: function (element) {
                    return $('#rd1').is(':checked');
                }
            }
        }
    },
    showErrors: function (errorMap, errorList) {
        var messages = "";
        var check = 0;
        $.each(errorList, function (index, value) {
            check = 1;
            var id = $(value.element).attr('id');
            messages += (index + 1) + ". " + value.message + "\n";
        });

        messages = "Please correct following errors \n" + messages;
        if (check == 1) {
            alert(messages);
        }
    },
    submitHandler: function () {},
    messages: {
        rd1: {
            required: GetErrorMesage(this)
        },
        txt1: {
            required: "Please enter in textbox"
        }
    }
});
}

 $('#submit').click(function () {
  submitForm()
 });

Note: This is the Same Question but does not have the answer.

Foi útil?

Solução

I got the answer DEMO

<div class="content-area">
  <form action="" method="post" id="Form1" name="Form1">
    <label for="txt1">First Name</label>
    <input type="text" id="txt1" name="txt1" maxlength="10" data-enter="true" />
    <label for="txt2">Last Name</label>
    <input type="text" id="txt2" name="txt2" maxlength="10" data-select="true" />
    <input type="submit" id="submit" value="SAVE " data-mini="true" />
  </form>
</div>


$('#Form1').validate({
onfocusout: false,
onkeyup: false,
ignore: "",
rules: {
    txt1: {
        required: true
    },
    txt2: {
        required: true

    }
},
showErrors: function (errorMap, errorList) {
    var messages = "";
    var check = 0;
    $.each(errorList, function (index, value) {
        check = 1;
        var id = $(value.element).attr('id');
        messages += (index + 1) + ". " + value.message + "\n";
    });
    messages = "Please correct following errors \n" + messages;
    if (check == 1) {
        alert(messages);
    }
},
submitHandler: function () {}

 });

$('#Form1 input[type="text"][data-enter]').each(function () {
var penter = "Please enter value for " + $('label[for=' + $(this).attr('id') + ']').html();
$(this).rules('add', {
    messages: {
        required: penter
    }
});
});



$('#Form1 input[type="text"][data-select]').each(function () {
var penter = "Please select value for " + $('label[for=' + $(this).attr('id') + ']').html();
$(this).rules('add', {
    messages: {
        required: penter
    }
});
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top