0

SRS: 5 つの電子メール フィールドで構成されるフォームを検証する必要があります。ルールは次のとおりです。プレースメントと注文に関係なく、これらのフィールドの少なくとも 1 つが有効な電子メールである必要があります。

これまでの私のコード:

    $("#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>

私の謙虚な意見では、私が達成しようとしていることは非常に単純であるため、複雑すぎます。そして、機能性を確認するために横向きに多くのことをしましたが、まだバグがあります。たとえば、最後のフィールドに間違った入力を入力して送信を2回押すと、エラーメッセージが消え、どちらが合理的かわかりません説明は、この動作を説明できます。

4

2 に答える 2

1

「私の謙虚な意見では、私が達成しようとしていることは非常に単純であるため、複雑すぎます。」

あなたは正しいです、必要以上に複雑にしていました。

「最後のフィールドに間違った入力をして送信を 2 回押すと、エラー メッセージが消えて、この動作を説明できる合理的な説明がわかりません。」

namejQuery Validate プラグインが正しく機能するには、すべての入力フィールドに属性が必要です。属性がなければname、プラグインは入力を追跡する方法がなく、動作は非常に予測不可能です。

また、ファイル内にadditional-methods.jsはというルールがありますrequire_from_group。要素に属性inputがすべて欠落していたため、最初に試したときはおそらく機能しませんでした。name

動作デモ: http://jsfiddle.net/zny9d/

また、このグループ化のすべてのエラー メッセージを 1 つにまとめるオプションと組み合わせました。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 (ジャバスクリプト) 

//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 に答える