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或false

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

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

1 个答案: