Question

我有以下jQuery Validation Plugin来验证电子邮件：

<html>
<body>
<div class="modal fade in" id="myModalMail" style="display: block;">
    <form action="/Reports/EmailReport/Create" class="form-horizontal" id="frmSendEmail" method="post" name="frmSendEmail" novalidate="novalidate">        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    ×
                </button>
                <h4 class="modal-title">
                    Email Report
                </h4>
            </div>
            <div class="modal-body">
                <div id="errorMessageContainer" class="alert alert-danger" role="alert" style="display:none;">
                    <ul id="msgBox" class="list-unstyled"></ul>
                </div>
                    <div class="form-group">
                        <div class="col-sm-3 control-label">
                            <strong>Change Report:</strong>
                        </div>
                        <div class="col-sm-7">
                            <select id="ddlReportList" name="ddlReportList" class="form-control ToCapture">
                                <option selected="selected" value="Detailed-Report">Agent Detail</option>

                           </select>
                        </div>
                    </div>
                <hr>
                <div class="form-group">
                    <div class="col-sm-3 control-label">
                        <strong>From:</strong>
                    </div>
                    <div class="col-sm-7">
                        <input class="form-control" id="From" name="From" tabindex="2" type="text" value="user1@qa.themls.com">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 control-label">
                        <strong>To:</strong>
                    </div>
                    <div class="col-sm-7">
                        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input class="form-control quiet reqrd ui-autocomplete-input" id="To" name="To" tabindex="3" type="text" value="" autocomplete="off"><span><a href="#" id="ccShowLink" style="display: inline;">Cc</a></span>&nbsp;<span><a href="preventDefault" id="bccShowLink">Bcc</a></span>
                    </div>
                </div>
                <div class="form-group" id="ccContainer" style="display: none;">
                    <div class="col-sm-3 control-label">
                        <strong>Cc:</strong>
                    </div>
                    <div class="col-sm-7">
                        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input class="form-control quiet reqrd ui-autocomplete-input" id="Cc" name="Cc" tabindex="4" type="text" value="" autocomplete="off">
                    </div>
                </div>
                <div class="form-group" id="bccContainer" style="display:none;">
                    <div class="col-sm-3 control-label">
                        <strong>Bcc:</strong>
                    </div>
                    <div class="col-sm-7">
                        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span><input class="form-control quiet reqrd ui-autocomplete-input" id="Bcc" name="Bcc" tabindex="5" type="text" value="" autocomplete="off">
                    </div>
                </div>
                <hr>
                <div class="form-group">
                    <label for="Subject" class="col-sm-3 control-label">Subject:</label>
                    <div class="col-sm-7">
                        <input class="form-control" id="Subject" name="Subject" tabindex="1" type="text" value="">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 control-label">
                        <strong>Message:</strong>
                    </div>
                    <div class="col-sm-7">
                        <textarea class="form-control" cols="20" id="Notes" name="Notes" rows="6" tabindex="6">Check out these listings.</textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <label class="pull-left col-sm-offset-3 col-md-offset-3">
                    <input checked="checked" data-val="true" data-val-required="The CopyMeBox field is required." id="CopyMeBox" name="CopyMeBox" type="checkbox" value="true"><input name="CopyMeBox" type="hidden" value="false"> Send me a Copy
                </label>

                <input type="submit" value="Send Email" class="btn btn-success">
            </div>
        </div>
    <div style="clear: both">
        </div>
<a class="ui-helper-hidden" href="/MLSReports/Stats/SearchContacts" id="searchContactUrl">searchContactUrl</a>            <!-- This div and iframe are the containers into which the page specified in the iframe src will be loaded. -->
        <div class="resdiv" id="result_div" style="display: none; z-index: 990; left: 0px;
                position: absolute; top: 0px">
                <iframe style="z-index: 999; position: absolute; left: 83px; top: 10px; width: 400px;
                    height: 400px; border: none" id="myfrm" title="spellchecker" name="myfrm" src="/AspellWeb/spellchecker.html">
                </iframe>
            </div>
</form>
</div>
</body>
</html>

电子邮件验证方法：

 $.validator.addMethod("multiemail", function (value, element) {
            var notValid = 0;
            if (this.optional(element)) // return true on optional element
                return true;
            var emails = value.split(new RegExp("\\s*,\\s*", "gi"));
            valid = true;
            for (var i in emails) {
                value = emails[i];
                value = value.commaTrim().trim();
                if (value.length == 0)
                    continue;
                try {
                    valid = valid && $.validator.methods.email.call(this, value, element);
                } catch (e) {
                    App.log(e.toString());
                }
            }
            return valid;
       }, 'One or more email addresses are invalid');

我的表单To, Cc, Bcc上有三个文本框。我面临的问题是当我在框中输入无效的电子邮件时，错误消息不会显示。请看下面的img粘贴。

enter image description here

    $("#frmSendEmail").validate({

        errorLabelContainer: "#msgBox",
        errorContainer: "#errorMessageContainer",
        wrapper: "li",
        onfocusout: false,
        success: function (label) {
            $("#errorMessageContainer").hide()
        },
        submitHandler: function (form) {
            var $form = $(form);
            var url = $form.attr('action');
            var tofield, fromfield, notesfield,  ccfield, bccfield;
            // get some values from elements on the page:
            tofield = $form.find('#To').val();

            ccfield = $form.find('#Cc').val();
            bccfield = $form.find('#Bcc').val();
            fromfield = $form.find('#From').val();
            notesfield = $form.find('#Notes').val();

            $.post(url, { To: tofield, Cc: ccfield, Bcc: bccfield, From: fromfield, Notes: notesfield, ReportUrl: url},
                  function (data) {
                      var content = document.createElement('h3').appendChild(document.createTextNode('<p>Email with link to <b>' + urlfield + '</b>' + ' was successfully sent!</p>'));
                      $(".modal-footer").hide();
                      $(".modal-body", "#newEmailModal").empty().replaceWith(content.data);
                      setTimeout(function () { $('#myModalMail').modal("hide"); }, 5000);

                  }
                );
        },
        rules: {
            To: {
                require_from_group: [1, ".reqrd"],
                multiemail: true,

                remote: {
                        url: URLForReportsapi + "CheckOkToSendEmail",
                        type: "post",
                        data: {
                            agentId: function () {
                                return $("#AgentId").val()
                            }
                        }
                    }
                },

            Cc: {
                require_from_group: [1, ".reqrd"],
                multiemail: true,

                    remote: {
                        url: URLForReportsapi + "CheckOkToSendEmail",
                        type: "post",
                        data: {
                            agentId: function () {
                                return $("#AgentId").val()
                            }
                        }
                    }
                },
                //checkForUnsubscribe: ["", ""]
            Bcc: {
                require_from_group: [1, ".reqrd"],
                multiemail: true,
                remote: {
                        url: URLForReportsapi + "CheckOkToSendEmail",
                        type: "post",
                        data: {
                            agentId: function () {
                                return     $("#AgentId").val()
                            }
                        }
                    }
                }
                //checkForUnsubscribe: ["", ""]
            },


        groups: {
            emailGroup: "To Cc Bcc"
        }

    });

验证电子邮件地址时出现Jquery验证问题

0 个答案: