jquery - jQueryMobile のフィールドの検証

Question

jQuery Mobile の最終バージョンと jQuery を使用しています。

ユーザーの入力を受け入れるフィールドを検証する必要があります。

入力が数値ではない場合、そのフィールドの近くにエラー検証メッセージを表示したいと思います。

jQuery Mobileでの作り方を知りたいです。

また、ユーザーにフィールドに数値のみを追加させることができるかどうかも知りたいです。

Answer 1

使用できますhttp://docs.jquery.com/Plugins/Validation

カスタム検証が必要な場合はaddMethod( name, method, message )、このプラグインをご覧ください

Answer 2

jquery.validate.jsjquery モバイルでも同じプラグインを使用できます。それ以外の場合は、formField検証が必要なすべてのフォーム フィールドにクラスを追加し、送信時に、フィールドを含む要素を取得してカスタム検証を行うことができます。各ページにハッシュを使用している場合は、次のように記述します。

<form class='myFormElem display-none'>
  <div class="errorField"
  <input type="text" data-regexp="^\+?[0-9]{10,15}$" class="formField">
  <input type="submit" class="submitForm">
</form

サンプル コード スニペット:

$(location.hash + ' .submitForm').off('click');
$(location.hash + ' .submitForm').on('click', function (e) {
    $(location.hash + ' .formField').each(function () {
        var elem = $(this), p, regexp;
        try {
            //validate fields
            p = elem.data('regexp');
            if (p !== "" && p !== null && typeof p !== "undefined") {
                regexp = new RegExp(p, ["g"]);
                if (!val.match(regexp)) {
                    throw "Error..(your error message here)";
                }
             }
        } catch (ex) {
            $(errField).removeClass('display-none').addClass('display-block');
            $(errField).html(ex);
        }
    }
});