0

jQuery検証の何が問題なのか誰か教えてもらえますか? フォームを検証するのではなく、コードを無視するだけで、入力がチェックされません。

形：

<form class="form" accept-charset="UTF-8" action="URL-to-complete-form" method="POST" onsubmit="return validateForm();">
<input class="form-name" type="text" placeholder="Name"></div>
<input class="form-email" type="text"placeholder="Email"></div>
<input style="background-color: #fc8f12;" type="submit" value="Subscribe">
</div>
</form>

Javascript:

function validateForm()
{
    // Validate Name
    var title = $(".form-name").val();
    if (title=="" ||title=="Name" || title==null) { } else {
        alert("Please enter a name!");
    }

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

お時間をいただき、ありがとうございました。

4

3 に答える 3

0

フォームに「action =」行があるため、フォームが送信されないようにするために何もしていないように見えます...送信時に、JavaScript関数を実行し、フォームを送信します。フォームが検証された後、javascript でフォームを送信する必要があります。それを行う方法はたくさんあります...おそらく最も簡単なのは、送信ボタンを送信タイプではなくボタンタイプにし、検証と送信をそのボタンのクリックにバインドすることです。

于 2013-11-10T07:44:40.857 に答える
0

検証を行うために送信ポストバックに「介入」しているため、明確になるようにコードをシフトし、フォームから送信ボタンを削除し、ボタンのクリックに基づいて検証を行い、有効なデータを使用して独自のフォーム カスタム ポストバックを実行します。

 <form class="form" accept-charset="UTF-8" method="POST" action="#">
        <input class="form-name" type="text" placeholder="Name"></div>
        <input class="form-email" type="text" placeholder="Email"></div>
        </div>
    </form>
    <button>Subscribe</button>

 $(function () {
            $('button').on('click', function (event) {
                validateForm();
            });

        });

        function validateForm() {
            // Validate Name
            var title = $(".form-name").val();
            if (!title) {
                alert("Please enter a name!");
                return false;
            }

            // Validate Email
            var email = $(".form-email").val();
            if (!email) {
                alert("Please an email address");
                return false;
            }

            if (!/(.+)@(.+){2,}\.(.+){2,}/.test(email)) {
                alert("Please enter a valid email");
                return false;
            }

            $.post('URL-to-complete-form', $("form").serialize(), function (data) {
                console.log('server call complete');
                console.log(data);
            });

        }

ここにも動作するjsFiddleがあります：http://jsfiddle.net/t8vQ2/

于 2013-11-10T08:26:52.413 に答える
0

HTML:

<form id="form1" ...

jQuery:

$("#form1").on("submit", function(){
  if($("input[name=firstName]").val() == ""){
    // errors here
    return false;
  }
});
于 2013-11-10T09:49:29.803 に答える