it-swarm.com.de

HTML/Javascript: Einfache Formularüberprüfung beim Absenden

Ich versuche, mein Formular auf einfachste Weise zu überprüfen, aber irgendwie funktioniert es nicht, und wenn ich auf "Senden" klicke, gelangen Sie einfach zur nächsten Seite, ohne eine Warnmeldung zu erhalten:

HTML:

<form name="ff1" method="post" onsubmit="validateForm();">
 <input type="text" name="email" id="fremail" placeholder="[email protected]" />
 <input type="text" name="title" id="frtitle" placeholder="Title" />
 <input type="text" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
 <input type="submit" name="Submit" value="Continue" />         
</form>

Javascript:

<script type="text/JavaScript">

function validateURL(url) {
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
    return re.test(url);
}

function validateForm()
{
    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) { } else {
        alert("Please enter only alphanumeric values for your advertisement title");
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
    }
  return false;
}
</script>

Hier ist auch in jsfiddle http://jsfiddle.net/CrLsR/

Danke im Voraus

19
Eduardo Go

Sie haben dort mehrere Fehler . Zuerst müssen Sie einen Wert von der Funktion im HTML-Markup zurückgeben: <form name="ff1" method="post" onsubmit="return validateForm();"> 

zweitens in jsfiddle den Platz innerhalb von onLoad, den das Formular dann nicht erkennt - und als letztes müssen Sie die Funktion true zurückgeben, wenn alle Validierungserfolge erfolgreich sind.

https://jsfiddle.net/mj68cq0b/

function validateURL(url) {
    var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
    return reurl.test(url);
}

function validateForm()
{
    // Validate URL
    var url = $("#frurl").val();
    if (validateURL(url)) { } else {
        alert("Please enter a valid URL, remember including http://");
        return false;
    }

    // Validate Title
    var title = $("#frtitle").val();
    if (title=="" || title==null) {
        alert("Please enter only alphanumeric values for your advertisement title");
        return false;
    }

    // Validate Email
    var email = $("#fremail").val();
    if ((/(.+)@(.+){2,}\.(.+){2,}/.test(email)) || email=="" || email==null) { } else {
        alert("Please enter a valid email");
        return false;
    }
  return true;
}
23
Adidi

Die einfachste Validierung lautet wie folgt:

<form name="ff1" method="post">
  <input type="email" name="email" id="fremail" placeholder="[email protected]" />
  <input type="text" pattern="[a-z0-9. -]+" title="Please enter only alphanumeric characters." name="title" id="frtitle" placeholder="Title" />
  <input type="url" name="url" id="frurl" placeholder="http://yourwebsite.com/" />
  <input type="submit" name="Submit" value="Continue" />         
</form>

Es verwendet HTML5 Attribute (wie pattern)

Javascript: keine.

16

Sie müssen die Validierungsfunktion zurückgeben. So etwas wie:

onsubmit="return validateForm();"

Dann sollte die Validierungsfunktion bei Fehlern false zurückgeben. Wenn alles in Ordnung ist, kehre zurück. Denken Sie daran, dass der Server ebenfalls validiert werden muss.

7
Jensd

Ich verwende diese wirklich einfache, kleine JavaScript-Bibliothek, um ein vollständiges Formular in einer einzigen Codezeile zu überprüfen:

 jsFormValidator.App.create().Validator.applyRules('Login');

Überprüfen Sie hier: jsFormValidator

Der Vorteil dieses Tools besteht darin, dass Sie nur ein JSON-Objekt schreiben, in dem Sie Ihre Validierungsregeln beschreiben.

 <input type=text name="username" data-validate placeholder="Username">

datenvalidierung wird in alle Eingabefelder Ihres Formulars eingefügt. Wenn Sie jedoch jsFormValidator verwenden, benötigen Sie diese umfangreiche Syntax nicht. Die Validierung wird in einem Schritt auf Ihr Formular angewendet, ohne dass Sie Ihren HTML-Code berühren müssen.

0
Nizar B.

Offenlegung: Ich habe FieldVal geschrieben.

Hier ist eine Lösung mit FieldVal . Wenn Sie die FieldVal-Benutzeroberfläche zum Erstellen eines Formulars und dann FieldVal zum Validieren der Eingabe verwenden, können Sie den Fehler direkt wieder an das Formular übergeben. 

Sie können sogar den Validierungscode im Backend ausführen (wenn Sie Node verwenden) und den Fehler im Formular anzeigen, ohne alle Felder manuell zu verkabeln.

Live-Demo: http://codepen.io/MarcusLongmuir/pen/WbOydx

function validate_form(data) {
    //This would work on the back end too (if you're using Node)

    //Validate the provided data
    var validator = new FieldVal(data);
    validator.get("email", BasicVal.email(true));
    validator.get("title", BasicVal.string(true));
    validator.get("url", BasicVal.url(true));
    return validator.end();
}


$(document).ready(function(){

    //Create a form and add some fields
    var form = new FVForm()
    .add_field("email", new FVTextField("Email"))
    .add_field("title", new FVTextField("Title"))
    .add_field("url", new FVTextField("URL"))
    .on_submit(function(value){

        //Clear the existing errors
        form.clear_errors();

        //Use the function above to validate the input
        var error = validate_form(value);

        if (error) {
            //Pass the error into the form
            form.error(error);
        } else {
            //Use the data here
            alert(JSON.stringify(value));
        }
    })

    form.element.append(
        $("<button/>").text("Submit")
    ).appendTo("body");

    //Pre-populate the form
    form.val({
        "email": "[email protected]",
        "title": "Your Title",
        "url": "http://www.example.com"
    })
});
0
Marcus

HTML-Formularelementüberprüfung 
Funktion ausführen

<script>
           $("#validationForm").validation({
                button: "#btnGonder",
                onSubmit: function () {
                    alert("Submit Process");
                },
                onCompleted: function () {
                    alert("onCompleted");
                },
                onError: function () {
                    alert("Error Process");
                }
           });
</script>

Gehen Sie zum Beispiel und laden Sie https://github.com/naimserin/Validierung herunter.

0
Naim Serin