使用不同的规则验证相同的表单元素,以便使用JQuery进行保存和提交

时间:2014-12-30 05:18:16

标签: jquery jquery-validate save submit

我试图使用JQuery验证插件验证表单字段。我使用jquery 1.10.2。有很多帖子,但没有人帮我解决我试图实施的问题。因此发布这个问题。我想在保存和提交时验证表单。我已经在提交的每个元素上定义了一组规则。它工作正常。现在,点击“保存”按钮,我只需要删除" required:true"来自验证规则。其余的验证规则与保存和提交相同。

当我尝试上述更改时,我总是得到"对象不支持属性或方法''"。我正在使用IE 9(我们在我们的项目中使用IE。需要在IE中使用它)。

以下是代码:

$(document).ready(function() {

  $("#myForm").formValidate();
});

jQuery.fn.formValidate = function(){

var form = this;

// Set the error to null
$("#errSummary").val('');

$(form).validate({

    //Not to place the error messages in line with the text fields
    errorPlacement: $.noop,

    //Create error summary that will appear before the form
    showErrors: function(errorMap, errorList) {
    if (errorList) {

        var $errorFormId = 'errors-' + form.attr('id');

        //Reset and remove error messages if the form has been validated once already
        //summary = "";

        // Set the summary to original error messages stored as part of submit
        // This helps to retain the error messages until there is a new submit
        summary = $("#errSummary").val();

        //$('label .error', form).remove();

        //Create container for error msg display
        if($('#' + $errorFormId).length == 0) {
            $('<div id="' + $errorFormId + '"/>').insertAfter("#header");
        }

        //Generate error summary list
        if (summary.length == 0){

            for (error in errorList) {
                //get associated label text to be used for the error summary
                var $errorLabel = $('label[for="' + $(errorList[error].element).attr('id') + '"]').text();
                summary += '<li><a href="#' + errorList[error].element.id + '" name="' + errorList[error].element.name + '" class="errorLink">' + $errorLabel + ' ' + errorList[error].message + '</a></li>';
            }

            //Output error summary and place it in the error container
            if(summary) {
                $('#' + $errorFormId).html('<h2>Errors found in the form</h2><p>One or more errors found in form. Please check and correct the following:</p><ul>' + summary + '</ul>').css("margin-left", "5px");
            } else {
                $('#' + $errorFormId).html('');
            }

            // Set the errSummary to current error messages for the most recent submit              
            $("#errSummary").val(summary);
         }

        //Move the focus to the associated input when error message link is triggered
        $('#' + $errorFormId + ' a').click(function() {

      $($(this).attr('href')).focus();
            return false;
        });
    }
    this.defaultShowErrors();
    submitted = false;
    },
    invalidHandler: function(form, validator){
        submitted = true;
    },
    onkeyup: false,
    onfocusout: false
});

var saveRules = {
field1: {
required: false,
digits: true,
minlength: 7,
maxlength: 10
}   
};

var submitRules = {
field1: {
required: true,
digits: true,
minlength: 7,
maxlength: 10
}   
};

function addRules(rulesObj){
for (var item in rulesObj){
       $('#'+item).rules('add',rulesObj[item]);  
} 
}

function removeRules(rulesObj){
for (var item in rulesObj){
       $('#'+item).rules('remove');  
} 
}

$("input[type='submit']").click(function() {

if ($(this).attr('id') == "saveForm") {
    removeRules(submitRules);
    addRules(saveRules);
} else {        
    removeRules(saveRules);
    addRules(submitRules);
    }
});

0 个答案:

没有答案