JavaScriptを使用したフォームの妥当性検査

フォームでの作業はほぼすべてのWeb開発者のための毎日の仕事です.どんなサイトを作成しても、フォームを使用します.クライアント側のフォームデータを検証するときに、ユーザーエクスペリエンスになる機能が良いです.このチュートリアルでは、JavaScriptを使用して簡単なフォームの検証を作成します.
クライアント側のフォームの検証は素晴らしいユーザーエクスペリエンスを与える一方、それは本当に簡単に騙され、バイパスすることができます.悪意のある使用を防ぐには、サーバー側のフォームデータを常に検証する必要があります

ビデオチュートリアル

あなたが詳細なステップバイステップのビデオを見るならば、あなたは私がこのプロジェクトをカバーしているビデオをチェックすることができます:

HTML

HTMLマークアップから始めましょう.私たちはcontainer 私たちは私たちのフォームを配置し、スタイルを使用します.その中で、驚くほどではなく、我々はform , 私たちもid そのためにaction to / このフォームを本当に提出したくないので.
ユーザー名、電子メール、パスワード、およびパスワード確認の4つの入力フィールドを作成します.スタイリングと制御目的のために、我々はこれらを包みますinput へのタグdiv Sクラスinput control . これらの入力コントロールの各々はlabel , 安input , とdiv クラスでerror . すべての入力はidとname属性を持つ必要があります.ラベルのマッチングが必要ですfor 対応する入力タグのname属性を持つプロパティ.入力タイプについてはtext ユーザ名とメールと使用のためにpassword パスワードとパスワード確認のために.によるdiverror クラスは、特定の入力フィールドのエラーメッセージを保持します.今のところ空になりますので、JavaScriptから変更します.
最後に、私たちのフォームを“送信”ボタンを追加する必要があります.この例では、実際にそれをシミュレートするフォームを送信しません.ボタンを送信するにはボタンを使用しますsubmit .

<div class="container">
        <form id="form" action="/">
            <h1>Registration</h1>
            <div class="input-control">
                <label for="username">Username</label>
                <input id="username" name="username" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="email">Email</label>
                <input id="email" name="email" type="text">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password">Password</label>
                <input id="password"name="password" type="password">
                <div class="error"></div>
            </div>
            <div class="input-control">
                <label for="password2">Password again</label>
                <input id="password2"name="password2" type="password">
                <div class="error"></div>
            </div>
            <button type="submit">Sign Up</button>
        </form>
    </div>

これは私たちのフォームに必要なHTMLマークアップです.CSSで少しスタイルを整えましょう.

CSS

我々は、このチュートリアルのためのシンプルでクリーンな広々としたデザインを提供します.私は背景として線形グラデーションを設定し、カスタムGoogleフォントを使用しますinstall from here.

body {
    background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
    font-family: 'Poppins', sans-serif;
}

私たちは、フォームの幅に固定幅を与え、マージンを持ってセンターを配置します.より多くのスペースを持つために、私たちはパディングの20 pxを適用します.我々は、固定フォントサイズ、光の背景色を設定し、また、角を丸めて境界半径を設定します.

#form {
    width: 300px;
    margin: 20vh auto 0 auto;
    padding: 20px;
    background-color: whitesmoke;
    border-radius: 4px;
    font-size: 12px;
}

フォームのタイトルについては、暗いテキストの色を使用し、水平方向にそれを使用して中央text-align: center . 我々は青色の背景色を使用しますので、送信ボタンを使用すると、白いテキストの色が必要です.また、ブラウザのデフォルトの境界線を削除し、少し境界線を与える.我々は、それをパディングとマージンで少しの間隔を与えて、100 %の幅を適用することによって、それを完全な幅にします.

#form h1 {
    color: #0f2027;
    text-align: center;
}

#form button {
    padding: 10px;
    margin-top: 10px;
    width: 100%;
    color: white;
    background-color: rgb(41, 57, 194);
    border: none;
    border-radius: 4px;
}

入力を互いに下に積み重ねるために、flexboxを使用します.それをするにはdisplay: flex; and flex-direction: column . 入力のために、我々は少し境界線半径で灰色の境界線をセットします.表示プロパティを設定しますblock , そして、幅100 %を適用することによって、それらを完全な幅にします.また、少しパッドを設定するので、それは広々としているでしょう.また、入力時にアウトラインを削除しますoutline: 0 .

.input-control {
    display: flex;
    flex-direction: column;
}

.input-control input {
    border: 2px solid #f0f0f0;
    border-radius: 4px;
    display: block;
    font-size: 12px;
    padding: 10px;
    width: 100%;
}

.input-control input:focus {
    outline: 0;
}

入力値が有効かどうかをユーザに視覚的なフィードバックを与えるために2つのクラス(“成功”と“error”)を使います.JavaScriptからこれらのクラスを特定の入力フィールドを含む入力コントロールdivに適用します.成功クラスが存在するとき、私たちは緑の境界色をセットします、さもなければ誤りがあるならば、我々は代わりに赤い境界色を使用します.エラーdivについては、小さなフォントサイズと赤い色を使用してエラーメッセージを表示します.

.input-control.success input {
    border-color: #09c372;
}

.input-control.error input {
    border-color: #ff3860;
}

.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

JavaScriptの検証を次のようにしましょう!

ジャバスクリプト

まず最初に、フォームの参照と入力フィールドを保存することです.すべての入力とフォームのIDを与えたので、我々は簡単に使用することによって行うことができますgetElementById .

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password2 = document.getElementById('password2');

自動的に送信するフォームを防ぐには、イベントリスナーをsubmit イベント.このイベントハンドラ関数preventDefault() フォームが自動的に送信されるのを防ぐ機能.提出する代わりに、我々は電話しますvalidateInputs 関数は、入力を有効にします.また、チェックアウトを通過した後にフォームを提出することができます.これを作成しますvalidateInputs 近いうちに.

form.addEventListener('submit', e => {
    e.preventDefault();

    validateInputs();
});

また、2つのヘルパー関数を作成します.setError ,畝setSuccess . これらのヘルパー関数を使用して、入力コントロールのエラーまたは成功状態を設定します.seterror 1から始めましょう.二つのパラメータを受け取ります.element , and message . 要素は、特定の入力コントロールにある入力要素です.まず最初に、入力コントロール親の部門を取得しなければなりませんinputControl を使用して入力制御divを取得しますparent 入力要素のプロパティ.次に、エラーdivを収集し、変数に保存します.入力クラスのコントロールをエラークラスで照会することで、これを行うことができます.
ここで、エラーdivのintextをパラメータに設定したメッセージに設定し、success 入力コントロールからのクラス(存在する場合)とエラークラスを追加します.

const setError = (element, message) => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = message;
    inputControl.classList.add('error');
    inputControl.classList.remove('success')
}

setuccessメソッドは本当に似ています.最初の違いは、パラメータとしてメッセージを受信しないことです.空の文字列にそのテキストを設定することでエラー表示をクリアする必要があります.最後にクラスアプリケーションを逆にしなければなりません.私たちはsuccess inputcontrolクラスを削除し、error クラス(存在する場合).

const setSuccess = element => {
    const inputControl = element.parentElement;
    const errorDisplay = inputControl.querySelector('.error');

    errorDisplay.innerText = '';
    inputControl.classList.add('success');
    inputControl.classList.remove('error');
};

我々は、メールを検証する1つの最後のヘルパー機能を作成します.あなたが正規表現を使用したくないならば、これはオプションのステップですemail . The isValidEmail 関数はパラメータとして文字列を受け取り、有効なメールかどうかをチェックするためにこの奇妙に見える正規表現を使用します.使いましょうString.test() 関数を使用して、文字列を正規表現に対してテストします.また、メールを文字列に変換して小文字にします.

const isValidEmail = email => {
    const 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(String(email).toLowerCase());
}

ではバリデータを作成しますvalidateInputs 関数.まず、すべての入力フィールドの値を取得します.入力フィールド参照のValueプロパティの値を取得することで、これを行うことができます.私たちはString.trim() 関数は、値の先頭と末尾から末尾の空の空白を削除します.
次に、入力の妥当性検査を開始できます.使いましょうif, else 検証を行うステートメント.ユーザ名の場合、空であるかどうかをチェックし、空の文字列で値を比較します.空ならば、我々は電話しますsetError 関数とユーザ名の要素を提供します.そうでなければ、私たちはsetSuccess ユーザー名要素を持つメソッド.今は他の入力フィールドに対してこれをしなければなりませんが、アプローチは同じです.

const validateInputs = () => {
    const usernameValue = username.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const password2Value = password2.value.trim();

    if(usernameValue === '') {
        setError(username, 'Username is required');
    } else {
        setSuccess(username);
    }
};

電子メールのために、それが提供されるかどうかチェックします、そして、空であるならば、エラーをセットしてください.それが空でないならば、我々は有効なメールアドレスであるかどうかチェックします、そして、そうでないならば、我々は誤りをセットします、さもなければ、我々はフィールドのために成功をセットします.

if(emailValue === '') {
        setError(email, 'Email is required');
    } else if (!isValidEmail(emailValue)) {
        setError(email, 'Provide a valid email address');
    } else {
        setSuccess(email);
    }
}

パスワードについては、それが空であるかどうかチェックします、そして、それが空でないならば、我々が7文字より長いかどうかチェックします.そうでなければエラーを設定します.そうでなければ成功として設定します.

if(passwordValue === '') {
        setError(password, 'Password is required');
    } else if (passwordValue.length < 8 ) {
        setError(password, 'Password must be at least 8 character.')
    } else {
        setSuccess(password);
    }
}

パスワード確認のために、私たちはそれが空であるかどうかチェックします、そして、パスワード確認値がパスワードの値に等しいかどうかチェックしなければなりません.

if(password2Value === '') {
        setError(password2, 'Please confirm your password');
    } else if (password2Value !== passwordValue) {
        setError(password2, "Passwords doesn't match");
    } else {
        setSuccess(password2);
    }
}

今、私たちは、特定のエンドポイントに我々のフォームを提出することができれば、すべての入力が検証されている.
良い仕事を今すぐ作業形式の検証JavaScriptがあります.クライアント側の妥当性検査を簡単に回避することができますので、常にサーバー側のフォーム入力を検証する必要があることに注意してください.現代のWeb開発で使用する、より高度なフォーム検証メソッドとライブラリがありますが、このプロジェクトは、ファンダメンタルズを開始し、学ぶためのとても良い方法です.

あなたが私からより多くを学ぶことができるところ？

私はいくつかのプラットフォームでWeb開発をカバーする教育コンテンツを作成する👀 それらをチェックします.
私も、私が私が作成した週または2週の教育内容を共有するニュースレターをつくります.雄牛なし💩 ちょうど教育内容.
🔗 リンク

🍺 サポートフリー教育buy me a beer

💬 参加するcommunity on Discord

📧 ニュースレターSubscribe here

🎥 YouTube

🐦 Twitter

📷 Instagram