Jquery Validator:动态获取消息中的Next / Current标签文本

时间:2014-03-03 12:34:58

标签: jquery-mobile jquery-validate

在错误消息中,我想在错误消息中添加当前,下一个或上一个控件的标签。例如,当我单击复选框时,它应显示“请选择名字的值

DEMO但这不起作用

<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()
 });

注意:这是Same Question,但没有答案。

1 个答案:

答案 0 :(得分:0)

我得到了答案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
    }
});
});