将焦点设置为用户名输入框（如果已存在而不清除所有字段）

Question

I have a registration form which handle by html5 and javascript validation. The form can't be submitted if there's an invalid input. It give an alert for the invalid input and focused on it. But I do ajax validation to check if username is already exist and it clears all my fields. what I do wrong? How to focus to username field without clearing all my field? Thankyou here is the code:

<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;
    }
}

and this is the form:

<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="[e-mail]" name="txt_pelangganEmail" pattern="\w.*+\@+[a-z]+\.[a-z]{2,7}" title="Example: [e-mail]" 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

Modify your form code as

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

instead of

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

And manually submit the form from the success part, instead of returning true or false using:

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