將焦點設置爲用戶名輸入框，如果它已經存在，但不清除所有字段

Question

我有一個註冊表單，它通過html5和javascript驗證進行處理。如果輸入無效，則無法提交表單。它爲無效輸入提供警報並專注於它。但是我做了ajax驗證來檢查用戶名是否已經存在，並清除了我的所有字段。我做錯了什麼？如何在不清除我的所有字段的情況下關注用戶名字段？ 三江源 這裏是代碼：

<script> 
function validateForm(){ 
    var pattEmail = /^\w.+\@+[a-z]+\.[a-z]{2,7}$/; 
    if(!pattEmail.test(formSignUp.txt_pelangganEmail.value)) { 
     alert("Invalid Email"); 
     formSignUp.txt_pelangganEmail.focus(); 
     return false; 
    } 
var username = formSignUp.txt_pelangganUname.value; 
    alert(username); 
    $.ajax({ 
     type: "POST", 
     url: 'ajax/Pelanggan/cekUsername.php', 
     async:false, 
     dataType: "html", 
     data: { 
      username:username 
     }, 
     success: function(data) { 
      alert(data); 
      if (data == 1) { 
       alert('username already exist'); 
       formSignUp.txt_pelangganUname.focus(); 
       return false; 
      } 
     } 
    }); 
var txt_pelangganPassword = /^\w{5,}$/; 
    if(!txt_pelangganPassword.test(formSignUp.txt_pelangganPassword.value)) { 

     // if(!(form.pword.value.match(/^.\w{5,}$/))){ 
     alert("Invalid Password"); 
     formSignUp.txt_pelangganPassword.focus(); 
     return false; 
    } 
    if(!(formSignUp.txt_pelangganPassword2.value == formSignUp.txt_pelangganPassword.value)){ 
     alert("Password tidak sama"); 
     formSignUp.txt_pelangganPassword2.focus(); 
     return false; 
    }else { 
     return true; 
    } 
} 

，這是形式：

<form method="post" action="" name="formSignUp" onSubmit="return validateForm();"> 
     <table class="tabelSignUp" > 
      <tr> 
       <td>NAMA DEPAN 
        <br><input type="text" id="txt_pelangganFname" placeholder="Nama Depan" name="txt_pelangganFname" size="40" pattern="[A-Za-z]+" autofocus="" required=""></td> 
      </tr> 
      <tr> 
       <td>NAMA BELAKANG 
        <br><input type="text" id="txt_pelangganLname" placeholder="Nama Belakang" name="txt_pelangganLname" size="40" pattern="[A-Za-z]+"></td> 
      </tr> 
      <tr> 
       <td>JENIS KELAMIN 
        <br> 
        <input type="radio" id="pelangganGender" name="pelangganGender" value="P" style="font-size: 12pt;" required="">Perempuan 
        <input type="radio" id="pelangganGender" name="pelangganGender" value="L" style="font-size: 12pt;" required="">Laki-laki 
       </td> 
      </tr> 
      <tr> 
       <td>ALAMAT 
        <br><textarea style="word-break: break-word;resize: none;" id="txt_pelangganAlamat" placeholder="Alamat" name="txt_pelangganAlamat" rows="3" cols="35" required=""></textarea></td> 
      </tr> 
      <tr> 
       <td>HANDPHONE 
        <br><input type="text" id="txt_pelangganHp" placeholder="08xxxxxxxxxxx" name="txt_pelangganHp" size="20" maxlength="15" pattern="[0-9]+" required=""></td> 
      </tr> 
      <tr> 
       <td>TEMPAT LAHIR 
        <br><input type="text" id="txt_pelangganTmpLahir" placeholder="Tempat Lahir" name="txt_pelangganTmpLahir" size="25" pattern="[A-Za-z ]+" required=""></td> 
      </tr> 
      <tr> 
       <td>TANGGAL LAHIR 
        <br> 
        <select id="txt_tgl" name="txt_tgl" required=""> 
         <?php 
         print '<option value="" disabled selected>dd</option>'; 
         for ($i = 1; $i <= 31; $i++) { 
          echo "<option value=" . $i . ">" . $i . "</option>"; 
         } 
         ?> 
        </select> 
        <select id="txt_bln" name="txt_bln" required=""> 
         <?php 
         print '<option value="" disabled selected>mm</option>'; 
         for ($i = 1; $i <= 12; $i++) { 
          echo "<option value=" . $i . ">" . $i . "</option>"; 
         } 
         ?> 
        </select> 
        <select id="txt_thn" name="txt_thn" required=""> 
         <?php 
         print '<option value="" disabled selected>yyyy</option>'; 
         for ($i = date("Y") - 60; $i <= date("Y") - 8; $i++) { 
          echo "<option value=" . $i . ">" . $i . "</option>"; 
         } 
         ?> 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        EMAIL 
        <br><input type="email" id="txt_pelangganEmail" placeholder="xxxxx@example.com" name="txt_pelangganEmail" pattern="\w.*+\@+[a-z]+\.[a-z]{2,7}" title="Example: abc@yahoo.com" size="60" required=""> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        USERNAME 
        <br><input type="text" id="txt_pelangganUname" placeholder="Username" name="txt_pelangganUname" size="60" pattern="[A-Za-z0-9]+" required=""> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        PASSWORD 
        <br><input type="password" id="txt_pelangganPassword" placeholder="Password" name="txt_pelangganPassword" required="" maxlength="20"> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        KONFIRMASI PASSWORD 
        <br><input type="password" id="txt_pelangganPassword2" placeholder="Retype Password" name="txt_pelangganPassword2" required="" maxlength="20"> 
       </td> 
      </tr> 
      <tr><td><input type="submit" name="butSignup" value="Sign Up"/></td></tr> 
     </table> 
    </form> 

Answer 1

修改你的表單代碼爲

<form method="post" action="" name="formSignUp" id="formSignUp" onSubmit="validateForm();return false;"> 

代替

<form method="post" action="" name="formSignUp" onSubmit="return validateForm();"> 

並手動從成功的一部分提交，而不是返回true或利用虛假形式：

$("#formSignUp").submit();