web-dev-qa-db-ja.com

HTML / Javascript：送信時の簡単なフォーム検証

私は可能な限り簡単な方法でフォームを検証しようとしていますが、どういうわけか機能せず、送信をクリックすると、警告メッセージを表示せずに次のページに移動します：

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>

こちらもjsfiddleにあります http://jsfiddle.net/CrLsR/

前もって感謝します

javascripthtmlformsvalidation
19
Eduardo Go

いくつかのエラーがあります。最初に、HTMLマークアップで関数から値を返す必要があります：<form name="ff1" method="post" onsubmit="return validateForm();">

次に、jsfiddleでonLoad内のコードを配置すると、フォームが認識できなくなります-そして最後に、すべての検証が成功した場合、関数からtrueを返す必要があります-アップデートでいくつかの問題を修正しました：

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

最も簡単な検証は次のとおりです。

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

HTML5属性 を使用します（patternなど）

Javascript：なし。

17
Niet the Dark Absol

検証関数を返す必要があります。何かのようなもの：

onsubmit="return validateForm();"

次に、検証関数はエラー時にfalseを返す必要があります。すべて問題なければ、trueを返します。サーバーも検証する必要があることに注意してください。

7
Jensd

この非常にシンプルな小さなJavaScriptライブラリを使用して、1行のコードで完全なフォームを検証します。

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

ここで確認してください： jsFormValidator

このツールの利点は、検証ルールを記述するJSONオブジェクトを記述するだけで、次のような行を記述する必要がないことです。

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

data-validateはフォームのすべての入力フィールドに挿入されますが、jsFormValidatorを使用する場合、この重い構文は不要であり、HTMLコードに触れることなく検証が1回でフォームに適用されます。

0
Nizar B.

開示：FieldValを作成しました。

FieldVal を使用したソリューションを次に示します。 FieldVal UIを使用してフォームを構築し、FieldValを使用して入力を検証することにより、エラーをフォームに直接渡すことができます。

Nodeを使用している場合は、バックエンドで検証コードを実行し、すべてのフィールドを手動で接続せずにフォームにエラーを表示することもできます。

ライブデモ： 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フォーム要素の検証
関数を実行

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

例に移動してダウンロード https://github.com/naimserin/Validation

0
Naim Serin