javascript - 防止在嵌套的 .NET 母版页上验证失败后清除元素

Question

验证工作完美，但如果验证失败，表单将清除所有数据。如何在不导致用户必须再次重新输入所有数据的情况下验证表单？由于重定向的性质，我需要 html 表单完全按照现在的方式呈现。

HTML:

    <div class="formHalf">
        <label for="first_name">
            First Name*</label>
        <input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="text" />
    </div>
    <div class="formHalf">
        <label for="last_name">
            Last Name*</label>
        <input id="last_name" maxlength="80" name="last_name" size="20" type="text" class="text" />
    </div>
    <div class="formWhole">
        <label for="company">
            Company</label>
        <input id="company" maxlength="40" name="company" size="20" type="text" class="text" />
    </div>
    <div class="formWhole">
        <label for="address">
            Address</label>
        <input id="address" maxlength="80" name="address" size="20" type="text" class="text" />
    </div>
    <div class="formHalf">
        <label for="city">
            City</label>
        <input id="city" maxlength="40" name="city" size="20" type="text" class="text" />
    </div>
    <div class="formHalf">
        <label for="state">
            State/Province</label><input id="state" maxlength="20" name="state" size="20" type="text"
                class="text" />
    </div>
    <div class="formHalf">
        <label for="zip">
            Zip</label><input id="zip" maxlength="20" name="zip" size="20" type="text" class="text" />
    </div>
    <div class="formHalf">
        <label for="country">
            Country</label><input id="country" maxlength="40" name="country" size="20" type="text"
                class="text" />
    </div>
    <div class="formHalf">
        <label for="email">
            Email*</label><input id="email" maxlength="80" name="email" size="20" type="text"
                class="text" />
    </div>
    <div class="formHalf">
        <label for="phone">
            Phone*</label><input id="phone" maxlength="40" name="phone" size="20" type="text"
                class="text" />
    </div>
    <div class="formWhole">
        <label for="description">
            Description</label><textarea name="description"></textarea>
    </div>
    <div class="formWhole">
        <input type="submit"  name="formSubmit" id="formSubmit">
    </div>
</div>`

脚本:

<script type="text/javascript" language="javascript">
   $(document).ready(function () {
        $("#formSubmit").click(function () {
            for (i = 0; i < 1; i++) {
                var isValid = validateForm();
                if (isValid) { }
                  $("form").attr("action", "https://www.other web site that redirects back to my page after logging form");
            }
        });
    });
 function validateForm() {
        var message = "";var message2="";
        var elements = new Array("first_name", "last_name", "phone", "email");
        var userElement = new Array(" First Name", "Last Name", "Phone Number", "E-Mail Address");
        for (i = 0; i < elements.length; i++)
         {
            var x = document.getElementById(elements[i]).value;

            if (x == null || x == "") {
                if (message != "")
                    message += ", "; message += userElement[i];
            }

             if (i == 3 && x != null && x != "") {
                var atpos = x.indexOf("@");
                var dotpos = x.lastIndexOf(".");
                if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                    message2 += "The email address is not valid.";
                }
            }


            if (i == 2 && x != null && x != "") {
                var checknumber = x.replace(/[^0-9]/g, '');
                if (checknumber.length != 10 && checknumber.length != 11) {
                    message2 += "The phone number is needs to be in format 123-456-7890 or 1-234-567-8901."; 
                }
            }
            // email and phone validation
        }
        if (message != "" || message2 != "") {
            if (message != "") {
                message += " must be filled out.";
            }
            message += message2;
            alert(message);
            return false;
        }
        return true;
    }
</script>`

Answer 1

最简单的方法就是在服务器端捕获 POST 或 GET 值。例如，当使用 PHP 时，您可以通过添加以下相应的输入标签来重新填充名字:

value="<?=$_POST['first_name']?>"

如果它是一个获取操作，您应该更改 POST 和 GET。不要忘记在服务器端进行额外验证。