web-dev-qa-db-fra.com

HTML/Javascript: validation de formulaire simple lors de l'envoi

J'essaie de valider mon formulaire de la manière la plus simple possible, mais cela ne fonctionne pas et lorsque je clique sur Soumettre, il me suffit de passer à la page suivante sans donner le message d'alerte:

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>

Voici aussi dans jsfiddle http://jsfiddle.net/CrLsR/

Merci d'avance

javascripthtmlformsvalidation
19
Eduardo Go

Vous avez plusieurs erreurs ici . Vous devez d’abord retourner la valeur de la fonction dans le balisage HTML: <form name="ff1" method="post" onsubmit="return validateForm();"> 

deuxième dans jsfiddle votre place le code à l'intérieur de onLoad qui alors le formulaire ne reconnaîtra pas - et enfin vous devez renvoyer true de la fonction si toute la validation réussit -

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

La validation la plus simple est la suivante:

<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>

Il utilise Attributs HTML5 (comme pattern)

Javascript: aucun.

16
Niet the Dark Absol

Vous devez renvoyer la fonction de validation. Quelque chose comme:

onsubmit="return validateForm();"

Ensuite, la fonction de validation doit retourner false en cas d'erreur. Si tout va bien, retourne vrai. Rappelez-vous que le serveur doit également valider.

7
Jensd

J'utilise cette petite bibliothèque JavaScript très simple pour valider un formulaire complet en une seule ligne de code:

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

Vérifiez ici: jsFormValidator

L'avantage de cet outil est que vous écrivez simplement un objet JSON qui décrit vos règles de validation, inutile de mettre une ligne comme celle-ci:

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

data-validate est injecté dans tous les champs de saisie de votre formulaire, mais lors de l'utilisation de jsFormValidator, vous n'avez pas besoin de cette syntaxe lourde et la validation sera appliquée à votre formulaire d'un coup, sans qu'il soit nécessaire de toucher à votre code HTML.

0
Nizar B.

Divulgation: j'ai écrit FieldVal.

Voici une solution utilisant FieldVal . En utilisant l'interface utilisateur de FieldVal pour créer un formulaire, puis FieldVal pour valider l'entrée, vous pouvez renvoyer l'erreur directement dans le formulaire. 

Vous pouvez même exécuter le code de validation sur le backend (si vous utilisez Node) et afficher l'erreur dans le formulaire sans câbler manuellement tous les champs.

Démo en direct: 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

Validation d'élément de formulaire HTML 
Fonction d'exécution

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

Allez à l'exemple et téléchargez https://github.com/naimserin/Validation

0
Naim Serin