Verstecken senden-Schaltfläche, bis die form gültig ist

Ich bin Recht neu mit Jquery, so könnte dies ein einfaches problem, aber gibt es eine Möglichkeit zum ausblenden der Schaltfläche "senden" auf einem Formular, bis Sie alle Felder validiert wurden.

Validierung brauchen würde, um ein "as you type" - Lösung. Im Grunde habe ich 3 Felder - Vorname, Nachname und e-mail. Ich würde gerne den submit-button zu bleiben ausgeblendet, bis die beiden 'name' Felder müssen ausgefüllt wurde und eine gültige e-mail-Adresse eingegeben wurde in die e-mail-Feld.

Form selbst verwendet AJAX zur Eingabe der Formulardaten in eine Datenbank. Das Formular in einer lightbox, die automatisch schließen, sobald der submit-button geklickt wird.

Können Sie ein Beispiel finden Sie hier: http://testing.xenongroupadmin.com/whatis/pfi

Ignorieren, die 'dieses Fenster Schließen" - link - das ist es nur für meine Bequemlichkeit und entfernt werden, die in der finalen version.

Unten ist der HTML-code für die form, gefolgt von der JQuery/AJAX submission-code:

<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
  </li>
 </ul>
 <input type="submit" value="Submit" id="emailbutton" />
</form>

Und Jquery:

$(document).ready(function(){
 $("form#registerform").submit(function() {
  var fname     = $('#fname').attr('value');
  var lname     = $('#lname').attr('value');
  var email     = $('#email').attr('value');    

 $.ajax({
  type: "POST",
  url: "post.php",
  data: "fname="+ fname +"& lname="+ lname +"& email="+ email,
  success: function(){

 $('div#register-panel, div#lightbox').fadeOut(300);
   }
  });
  return false;
 });
});

Dank!

ho kann überprüft werden, ob die Eingänge?
Ich bin Planung, um die jquery-validation-plugin, aber habe nicht geschrieben, den code noch
Warum nutzen Sie nicht .val() anstelle von attr('value'); ?
Tun können. Noch brauchen, um herauszufinden, wie zu tun, machen Sie den Absenden-button angezeigt wird, obwohl.
Naja ich würd wahrscheinlich führen Sie eine Gültigkeitsprüfung auf ein pro-Feld-basis, basierend auf blur, wo auf dem letzten Feld nach der erfolgreichen Validierung das Feld ausführen ein neben der Prüfung gegen alle Felder, wo Sie, wenn es kommt wieder ein Erfolg für alle wird, zeigen Sie die-Taste.

InformationsquelleAutor Chris | 2012-07-27

5

http://jsfiddle.net/nickaknudson/KnZaq/
```
$(document).ready(function() {
    $('#emailbutton').hide();
    $('input').change(function(e) {
        if ($('#fname').val() && $('#lname').val() && $('#email').val() && validateEmail($('#email').val())) {
            $('#emailbutton').show();
        }
    });
});

var validateEmail = function(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);
};
```
UPDATE

Sorry, vielleicht wurde das buggy-version von der Geige. Versuchen Sie es erneut?
http://jsfiddle.net/nickaknudson/KnZaq/3/

RESSOURCEN
- Validierung der E-Mail-Adresse in JavaScript?
- Gute Lösung, Nick! Chris, wenn Sie voran gehen mit diese, denken Sie daran, dass Sie halten alle Ihre Validierung auf dem front-end, so sollten Sie trotzdem überprüfen auf das backend. Andernfalls können Sie die Menschen gemacht haben, ändern Sie einfach die css in Ihrem browser und senden Sie das Formular ohne Eingabe der Informationen (leere und ungültige Einsendungen). Auch, möchten Sie vielleicht zu warten, bis die AJAX-post wieder ein Indiz dafür, dass die Einreichung gültig war und erfolgreich abgeschlossen, bevor Sie das Fenster schließen, aus dem gleichen Grund.
- Das sieht toll aus, nur ein kleines problem - die var validateEmail hat einen bug irgendwo, so dass es klopft, alle meine javascript! Ich wünschte, ich wüsste, wie man dieses Problem beheben selbst, aber ich die "var re = /^(( etc." - Zeile ist eine Fremdsprache für mich!
- Ich würde empfehlen, mit disabled="disabled" eher als versteckt Sie den Absenden-button. Als Zacharias wies darauf hin, dies nicht verhindern, dass Benutzer entfernen das Attribut manuell und dann die Abgabe einer ungültigen form, so tun, stellen Sie sicher, dass server-side-validaiton.
- In anderen Worten, $('#emailbutton').hide() änderungen $('#emailbutton').attr("disabled", "disabled"), und $('#emailbutton').show() änderungen $('#emailbutton').attr("disabled", null)
- Ich bin nicht zu sehen, keine Probleme mit verlieren JavaScript folgenden mein code. jsfiddle.net/nickaknudson/KnZaq/4
- Hi Nick, die meisten up-to-date-version (jsfiddle.net/nickaknudson/KnZaq/4) scheint geklappt zu haben - vielen Dank!!!
InformationsquelleAutor nickaknudson
0

Ich weiß nicht, was die Validierung plugin du verwendest, aber ich nehme an, es gibt immer dann einen true/false. Entweder in Ihrer ready-handler oder in die css legen Sie die Anzeige der Schaltfläche "senden" auf "none", dann, nachdem Sie bestätigt haben, verwenden Sie die JQuery show () - Methode. So etwas wie:
```
if (formIsValid) {
    $("#submitID").show();
}
```
Andere, nutzerfreundlichere Möglichkeit wäre, zu zeigen, der button aber deaktiviert, bis die form gültig ist, aktivieren Sie es.

Dave

InformationsquelleAutor dsvick

Ihre Formular-Daten ist nicht so groß, Sie können etwas tun, manuell (denke ich), wenn Sie möchten, um etwas neues zu lernen, statt der Verwendung von plugins und Validierungen in javascript Seite.

Gut, ich bevorzuge es, zu validieren, die Dinge durch die server-Seite, werfen Sie einen Blick auf diese:

Getestet und arbeiten:

index.htm

<html>
<head>
<title>Get more information</title>
</head>
<style>
.error {
    color: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

    $('#emailbutton').on('click', function(){
        var fname = $('#fname').val();
        var lname = $('#lname').val();
        var email = $.trim($('#email').val());

        $.post('validate.php', {fname:fname, lname:lname, email:email}, function(data){
            if(data != 1) {
                var obj = $('#' + data + '_msg');
                if(data == 'fname') {
                    obj.html('Invalid first name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'lname') {
                    obj.html('Invalid last name.').addClass('error').show().fadeOut('slow');
                } else if (data == 'email') {
                    obj.html('Invalid email.').addClass('error').show().fadeOut('slow');
                }
            } else if(data == 1) {
                $('#registerform').submit();
            }
        });
    });


});
</script>
<body>
<form id="registerform" action="thanks.php" method="POST">
 <ul id="inputform">
  <li>
   <label for="firstname" id="firstnamelabel">First Name</label>
   <input type="text" name="first_name" id="fname" class="registerboxes" />
   <span id="fname_msg"></span>
  </li>
  <li>
   <label for="lastname" id="lastnamelabel">Last Name</label>
   <input type="text" name="last_name" id="lname" class="registerboxes" />
   <span id="lname_msg"></span>
  </li>
  <li>
   <label for="email" id="emaillabel">E-mail Address</label>
   <input type="text" name="emailbox" id="email" class="registerboxes" />
   <span id="email_msg"></span>
  </li>
 </ul>
 <input type="button" value="Submit" id="emailbutton" />
</form>
</body>
</html>

validate.php

<?php 
if(isset($_POST['fname']) && isset($_POST['lname']) && isset($_POST['email'])) {

    $fname = $_POST['fname'];
    $lname = $_POST['lname'];
    $email = $_POST['email'];

    if(validateInput($fname, 2, 25)) {
        if(validateInput($lname, 2, 30)) {
            if(validateEmail($email, 5, 150)) {
                print(1);
            } else {
                print('email');
            }
        } else {
            print('lname');
        }
    } else {
        print('fname');
    }
}
function validateInput($value, $minlength, $maxlength) {
    $valid = false;
    try {
        if (strlen(trim($value)) == 0) {
            $valid = false;
        } else if (strlen(trim($value)) < $minlength || strlen(trim($value)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}

function validateEmail($email, $minlength, $maxlength) {
    $valid = false;
    try {
        if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
            $valid = false;
        } else if (strlen(trim($email)) == 0) {
            $valid = false;
        } else if (strlen(trim($email)) < $minlength || strlen(trim($email)) > $maxlength) {
            $valid = false;
        } else {
            $valid = true;
        }
    } catch (exception $e) {
        /* get exception: $e->getMessage() */
        $valid = false;
    }
    return $valid;
}
?>

thanks.php

<?php 
if(isset($_POST['first_name']) && isset($_POST['last_name']) && isset($_POST['emailbox'])) {

$fname = $_POST['first_name'];
$lname = $_POST['last_name'];
$email = $_POST['emailbox'];

echo $fname.' '.$lname.' '.$email;

//Do what you need with your data at this point, don't forget to sanitize values to insert them in your DB :-)

}
?>

InformationsquelleAutor Oscar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.