0

さて、jQueryでフォームバリデーションをしようとしています。理由はわかりませんが、送信をクリックすると、既に表示されているページにリダイレクトされます。

フォーム アクションは空白で、ヘッダーに JavaScript ファイルを含めました。

以下にコードを載せておきます。何が間違っているのか教えてください。jQueryで検証してから、メソッドPOSTでそれらの値を含むphpファイルに送信してください。

Register.js:

$(document).ready(function() {
  $('button[name=regsubmit]').click(function(){
    var fname = $('input[name=regfirstname');
    var lname = $('input[name=reglastnaame');
    var email = $('input[name=regemail');
    var password = $('input[name=regpassword');
    var repeatpassword = $('input[name=regrepeatpassword');
    var username = $('input[name=regusername');
    var atpos = email.indexOf("@");
    var dotpos = email.indexOf(".");
    if (fname==null || fname=="")
      {
      alert('First name must be filled out!');
      return false;
      }
    if (lname==null || lname=="")
      {
      alert('Last name must be filled out!');
      return false;
      }
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
      {
      alert('Not a valid e-mail address!');
      return false;
      }
    if (username==null || username=="")
      {
      alert("Username field must be filled out!");
      return false;
      }
    if (password==null || password=="")
      {
      alert("Subject field must be filled out!");
      return false;
      }
     if (repeatpassword==null || repeatpassword=="")
      {
      alert("Repeat password field must be filled out!");
      return false;
      }
    if (password != repeatpassword)
      {
      alert("The passwords do not match!");
      return false;
      }
    else
    {
    location.href="register.php";
    }
  });
});

形：

               <form name="register" method="POST">
                <fieldset>
                  <div class="form-container row-fluid">
                    <div class="span6"> 

                      <div class="control-group">
                        <label class="control-label" for="regfirstname">First Name</label>
                        <div class="controls">
                          <input id="regfirstname" tabindex="1" name="regfirstname" type="text" placeholder="First Name" class="input-large" required>
                        </div>
                      </div>

                      <div class="control-group">
                        <label class="control-label" for="regusername">Username</label>
                        <div class="controls">
                          <input id="regusername" tabindex="3" name="regusername" type="text" placeholder="Username" class="input-large" required>
                        </div>
                      </div>



                      <div class="control-group">
                        <label class="control-label" for="regpassword">Password</label>
                        <div class="controls">
                          <input id="regpassword" tabindex="5" name="regpassword" type="password" placeholder="Password" class="input-large">
                        </div>
                      </div>
                          <div class="controls">
                            <button id="regsubmit" tabindex="7" name="regsubmit" class="button background-asbestos">Submit</button>
                          </div>
                    </div><!-- .span6 -->

                    <div class="span6"> 

                      <div class="control-group">
                        <label class="control-label" for="reglastname">Lastname</label>
                        <div class="controls">
                          <input id="reglastname" tabindex="2" name="reglastname" type="text" placeholder="Lastname" class="input-large" required>
                        </div>
                      </div>

                      <div class="control-group">
                        <label class="control-label" for="regemail">Email</label>
                        <div class="controls">
                          <input id="regemail" name="regemail" tabindex="4" type="text" placeholder="example@example.com" class="input-large"</td>
                        </div>
                      </div>

                      <div class="control-group">
                        <label class="control-label" for="regrepeatpassword">Repeat Password</label>
                        <div class="controls">
                          <input id="regrepeatpassword" tabindex="6" name="regrepeatpassword" type="password" placeholder="Repeat Password" class="input-large" required>
                        </div>
                      </div>
                      <!-- .span6 -->
                    <!-- span6 --> 
                  </div><!-- .row-fluid -->
                </fieldset>
              </form>
4

2 に答える 2

1

JS と HTML はごちゃごちゃしているので、すべてを再作成するわけではありませんが、基本的なことは次のとおりです。

フォームに ID を付与します。

<form id="SomeForm" name="register" method="POST">

次に、デフォルトのアクションを防止し、パスした場合に送信します。

// reference the button by the ID you gave it
$('#regsubmit').click(function(e){
    // stop original submission
    e.preventDefault();

    // all your checking stuff here, but if true, then:
    document.getElementById('SomeForm').submit();
});

これにより、ボタンを正しく参照し、送信を正しく防止し、有効な場合にのみ送信することが保証されます。

于 2013-10-22T20:31:05.313 に答える