1

ここまでは、表示されるコンテンツとして個々のフォーム ( ) を使用して、単一の html ページから始めました<form> </form>。そのため、送信ボタンをクリックすると、現在のフォームがフェードアウトしてから、新しいフォームがフェードインします。これは、ダウンロードした JavaScript デモを使用して行います。

しかし問題は、私たちの課題ではフォームの検証を使用する必要があるということです。そのため、電子メールとパスワードのフィールドが空白の場合、アラートが表示されます。送信ボタンをクリックすると警告ウィンドウが表示されますが、現在のログインフォームにとどまる必要があるときにフォームの変更が引き続き発生するという問題がありますか?

ログインフォームはこちら

<form class="login active" id="logform">
  <h3>Login</h3>
  <div>                         
    <label>Email:</label>                           
    <input id="email3" type="text" />                       
    <span class="error">This is an error</span> 
  </div>

  <div>                     
    <label>
      Password: <a rel="forgot_password" class="forgot linkform">Forgot your password?</a>
    </label>
    <input type="password" id="pass1" />                        
    <span class="error">This is an error</span>
  </div>

  <div class="bottom">                          
    <div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
    <input id="logme" type="submit" onClick="ValidateLog();" rel="emailhome" class="linkform" value="Login"></input>`
    <a rel="register" class="linkform">You don't have an account yet? Register here</a>                   

    <div class="clear"></div>                       
  </div>                    
</form>

これは私が切り替えようとしているフォームです

<form id="homeform" class="emailhome">
  <h3>Welcome to CM Email</h3>
  <div>
  </div>
</form>

*検証が正しくない場合にフォームが変更されないようにする方法を見つける必要がありますか? remove attribute class を使用して関数がリンク フォームを検出しないようにしましたが、それでも役に立ちません!? *

function ValidateLog(){
  //EMAIL VALIDATION
  var emailblank = document.forms["logform"]["email3"].value;  
  if (emailblank==null || emailblank=="")
  {
    alert("Error: Please enter your email.");
    return false;
  }

  //PASS VALIDATION
  var passlog = document.forms["logform"]["pass1"].value;
  if (passlog==null || passlog=="")
  {
    alert("Error: Please enter your password.");
    return false;
  }
}
4

2 に答える 2

2

onsubmitフォームの値を設定できます。

フォームが実行されない場合、validate関数は「false」を返す必要があります。例：

function myValidateFunction() {
   if (<email is blank>) {
      return false;

   } else {
      return true;
   }
}

別の方法は、送信ボタンを置き換えることです。

<button onlick="myValidateFunction()" type="button">Submit</button>

関数を次のように変更する必要があります。

function myValidateFunction() {
   if (<email is blank>) {
      // do nothing

   } else {
      document.getElementById("myForm").submit()
   }
}
于 2012-11-25T16:08:04.827 に答える
1

jQueryを使用している場合は、学習を始めたばかりなので、作業がはるかに簡単になります。次のようにすることができます。

<script>
    $('#logform').submit(function(event){
        event.preventDefault(); // will stop redirect

        // now do your validation checks
        if ($('#email3').val() !== '') {
            alert("Error: Please enter your email.");
            return false; 
        } 
        if ($('#pass1').val() !== '') {
            alert("Error: Please enter your password."); 
            return false; 
        }

        // passed validation, do whatever's next...
    });
</script>

jQuery： http: //jquery.com/

于 2012-11-25T16:12:30.527 に答える