0

SRS：我需要验证一个包含 5 个电子邮件字段的表单。规则如下：无论放置和订单如何，至少其中一个字段应该是有效的电子邮件。

到目前为止我的代码：

    $("#frm_referral_email").validate({
    rules: {
        referral_invitation_text: {required: true}
    },
    messages: {
        referral_invitation_text: "Enter your message"
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
            if (error.html() != "")
                error.appendTo( element.parent().next() );
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
        // if(!("#frm_referral_email").valid())
        //  return false;
        var valid = true;
        $('.referral_email').each(function(){
            if($(this).hasClass('error')){
                valid = false;
                return true;
            }
        });
        if(!valid){
            return false;
        }
        var coworker_invitation_text = $('#frm_referral_email #referral_invitation_text').val();
        var coworker_invitation_text_ext = $('#frm_coworker_email #referral_invitation_text_ext').html();
        var referral_email_coworker_sent = $('#coworker_email_sent').val();
        var referral_email_not_sent = $('#coworker_email_not_sent').val();
        var user_full_name = $('#user_full_name').val();
        var from_email = $('#user_email').val();
        var referral_email_arr = [];
        var i = 0;

        $('.referral_email').each(function()
        {

            var elem = $(this);


            if (elem.val().indexOf("example") < 0 && elem.val() != ""){
                coworker_email_arr.push(elem.val());
                i++;
            }
        });

        if (i ==0 ){
            $("#frm_referral_msg").html(get_phrase("enter_emails"));
            return;
        }



        var email_send = new email_generator(referral_email_arr,from_email, get_phrase("invite_subject") ,coworker_invitation_text, referral_email_invatation_text_ext,referral_email_sent,referral_email_not_sent);
        email_send.send('frm_coworker_msg');
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
        // set &nbsp; as text for IE
        //label.html("&nbsp;").addClass("checked");
    }

});
$(".coworker_email, .coworker_email.error").rules("add", { 
                // require_from_group: [1, '.referral_email'],
                email:true,
                required:  {
                        depends: function(element){
                            var sumUp = 0;


$(".coworker_email").each(function(){
                                sumUp += $(this).val().length;
                    });
                    if(sumUp == 0)
                        return true;
                    else
                        return false;
                    }
                },

    messages: "Please enter at least one valid email"
});

HTML：

                            <div>
                        <span style='text-align:left;'><?=get_phrase("EmailAddresses")?>:</span>
                        <br/>
                        <input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
                        <br/>
                        <input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
                        <br/>
                        <input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
                        <br/>
                        <input type='text' class='referral_email' placeholder='example@<?=$company_domain_name?>'/>
                        </div>
                        <div class='error_msg'></div>

在我看来，这太复杂了，因为我想要实现的目标非常简单。尽管我做了很多侧面来确保它的功能，但仍然存在错误，例如如果你在最后一个字段中输入了错误的输入，然后按两次提交，错误消息就会消失，我不知道哪个合理解释可以解释这种行为。

4

2 回答 2

1

“在我看来，这太复杂了，因为我想要实现的目标非常简单。”

你是对的，你让它变得比它需要的更复杂。

“如果您在最后一个字段中输入错误，然后按两次提交，错误消息将消失，我不知道哪种合理的解释可以解释这种行为。”

jQuery Validate 插件要求您name在所有输入字段上都有一个属性才能正常运行。如果没有name属性，插件就无法跟踪输入，并且行为非常不可预测。

此外，文件additional-methods.js中还有一个名为require_from_group. 当您第一次尝试它时它可能不起作用，因为您的input元素都缺少该name属性。

工作演示：http: //jsfiddle.net/zny9d/

我还将它与将此分组的所有错误消息合并为一个的groups选项相结合。

$(document).ready(function () {

    $('#myform').validate({
        groups: {
            group: "name1 name2 name3 name4 name5"
        },
        rules: {
            name1: {
                require_from_group: [1, '.referral_email'],
                email: true
            },
            name2: {
                require_from_group: [1, '.referral_email'],
                email: true
            },
            name3: {
                require_from_group: [1, '.referral_email'],
                email: true
            },
            name4: {
                require_from_group: [1, '.referral_email'],
                email: true
            },
            name5: {
                require_from_group: [1, '.referral_email'],
                email: true
            }
        }
    });

});

HTML：

<form id="myform">
    <input type='text' name='name1' class='referral_email' />
    <input type='text' name='name2' class='referral_email' />
    <input type='text' name='name3' class='referral_email' />
    <input type='text' name='name4' class='referral_email' />
    <input type='text' name='name5' class='referral_email' />
</form>

在不相关的注释中，您不需要在此处使用条件：

errorPlacement: function(error, element) {
    if (error.html() != "")
        error.appendTo( element.parent().next() );
},

每当此回调触发时，error.html()永远不会为空，因此首先测试它是否为空是没有意义的。

这将具有相同的功能：

errorPlacement: function(error, element) {
    error.appendTo( element.parent().next() );
},
于 2013-04-08T14:25:06.217 回答
1

自定义验证方法将适用于这种情况

JS (JavaScript) 

//valid email checking function
function validateEmail(email) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}


//custom method for jquery validator
$.validator.addMethod('refEmail', function (value, element, params) {
    var num_valid = 0;
    $(params).each(function () {
        if (validateEmail($(this).val()))
            num_valid++
        });
    return num_valid != 0;
}, 'Please enter at least one valid email address');


//specifying custom validator for your elements after $("#frm_referral_email").validate();
$('.referral_email').rules('add', {
    required: false,
    refEmail: '.referral_email'
})

请注意，您必须填写必填字段才能使用$('.referral_email')。最终将不需要这些字段，因为我们在自定义方法中为它们设置required: false

我知道可能有其他方法可以实现相同的目标。

注意：您应该删除所有其他验证方法.referral_email以促进此特定验证要求。

于 2013-04-08T09:56:05.153 回答