Beste Umgestalten Handle Multiple jQuery E-Mail-Feld Form Validation

StackOverflow https://stackoverflow.com/questions/69107

Frage

Was ist der beste Weg, den beigefügten Code Refactoring mehrere E-Mail-Adressen aufnehmen?

Die beigefügte HTML / jQuery ist abgeschlossen und arbeitet für die erste E-Mail-Adresse. Ich kann Setup die beiden anderen durch Kopieren / Einfügen und Ändern des Codes. Aber ich möchte nur den vorhandenen Code Refactoring, um mehrere E-Mail-Adresse Felder zu bearbeiten. 

<html>
<head>
    <script src="includes/jquery/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script language="javascript">
        $(document).ready(function() {
            var validateUsername = $('#Email_Address_Status_Icon_1');

            $('#Email_Address_1').keyup(function() {
                var t = this;
                if (this.value != this.lastValue) {
                    if (this.timer) clearTimeout(this.timer);
                    validateUsername.removeClass('error').html('Validating Email');

                    this.timer = setTimeout(function() {
                        if (IsEmail(t.value)) {
                            validateUsername.html('Valid Email');
                        } else {
                            validateUsername.html('Not a valid Email');
                        };
                    }, 200);

                    this.lastValue = this.value;
                }
            });
        });

        function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (regex.test(email)) return true;
            else return false;
        }  
    </script>
</head>
<body>
    <div>
        <label for="Email_Address_1">Friend #1</label></div>
        <input type="text" ID="Email_Address_1">
        <span id="Email_Address_Status_Icon_1"></span>
    </div>
    <div>
        <label for="Email_Address_2">Friend #2</label></div>
    <input type="text" id="Email_Address_2">
        <span id="Email_Address_Status_Icon_2"></span>
    </div>
    <div>
        <label for="Email_Address_3">Friend #3</label></div>
    <input type="text" id="Email_Address_3">
        <span id="Email_Address_Status_Icon_3"></span>
    </div>
    </form>
</body>
</html>
War es hilfreich?

Lösung

Stattdessen IDs für Ihre E-Mail-Felder zu verwenden, können Sie sie jeweils eine Klasse geben: 

<div>
    <label for="Email_Address_1">Friend #1</label></div>
    <input type="text" class="email">
    <span></span>
</div>
<div>
    <label for="Email_Address_2">Friend #2</label></div>
    <input type="text" class="email">
    <span></span>
</div>
<div>
    <label for="Email_Address_3">Friend #3</label></div>
    <input type="text" class="email">
    <span></span>
</div>

Dann wird anstelle $ auszuwählen ( "# Email_Address_Status_Icon_1"), können Sie $ ( "input.email") wählen, die Ihnen eine jQuery würde wrapped Menge aller Eingabeelemente der Klasse E-Mail.

Schließlich statt Bezug auf das Statussymbol explizit mit einer ID, könnte man einfach sagen: 

$(this).next("span").removeClass('error').html('Validating Email');

‚dies‘ würde das E-Mail-Feld sein, so ‚this.next ()‘ würden Ihnen seine nächsten Geschwister geben. Wir wenden die „Spanne“ Selektor oben auf, dass nur sicher zu sein, wir bekommen, was wir beabsichtigen. $ (This) .next () würde die gleiche Art und Weise arbeiten.

Auf diese Weise, Sie beziehen sich auf das Statussymbol in einer relativen Art und Weise.

Hope, das hilft!

Andere Tipps

Danke! Hier ist das fertige refactor mit Ihren vorgeschlagenen Änderungen. 

<script language="javascript">
        $(document).ready(function() {
            $('#Email_Address_1').keyup(function(){Update_Email_Validate_Status(this)});
            $('#Email_Address_2').keyup(function() { Update_Email_Validate_Status(this)});
            $('#Email_Address_3').keyup(function() { Update_Email_Validate_Status(this)});            
        });

        function Update_Email_Validate_Status(field) {
            var t = field;
            if (t.value != t.lastValue) {
                if (t.timer) clearTimeout(t.timer);
                $(t).next("span").removeClass('error').html('Validating Email');

                t.timer = setTimeout(function() {
                    if (IsEmail(t.value)) {
                        $(t).next("span").removeClass('error').html('Valid Email');
                    } else {
                    $(t).next("span").removeClass('error').html('Not a valid Email');
                    };
                }, 200);

                t.lastValue = t.value;
            }
        }

        function IsEmail(email) {
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (regex.test(email)) return true;
            else return false;
        }  
    </script>

ich tun würde: 

$(document).ready(function() {
        $('.validateEmail').keyup(function(){Update_Email_Validate_Status(this)});            
    });

Dann Klasse hinzufügen = 'validateEmail' auf alle Ihre E-Mail-Eingänge.

suchen Alternative in Form Validation Plugin ich viel diese verwendet haben und es ist sehr flexibel und nett zu benutzen. Spart neu zu erfinden ...

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top