Validate AJAX generated form field.

Question

I have a form with select Field A. This field can be dynamically populated based on the URL or it can be selected as usual.

Once a value has been selected in Field A either way, select Field B is populated and exposed with JQuery AJAX.

Here is the problem. If Field A is left untouched, and is dynamically populated by the URL, Field B will properly validate. However, if Field A is changed, Field B will no longer attempt to validate.

Field A

<select name="FieldA" id="FieldA">
<option value="">Please Select</option>
<?php 
    while($FieldA= mysql_fetch_array($result2)) {
?>
<option value="<?php echo $FieldA['FieldAID']; ?>"<?php if ($var == $FieldA['FieldAID']) echo " selected=\"selected\""; ?>><?php echo $FieldA['FieldAName']; ?>    </option>
<?php } ?>
</select>

Field B

<select name="FieldB" id="FieldB">
<option value="">Please Select</option>
<?php 
    while($FieldB = mysql_fetch_array($result)) {
?>
<option value="<?php echo $FieldB['FieldBID']; ?>"><?php echo str_replace('|',' - ',$FieldB['FieldBName']); ?></option>
<?php } ?>
</select>

Validation Criteria

<script language="JavaScript" type="text/javascript">
var frmvalidator  = new Validator("FormName");  
frmvalidator.addValidation("FieldA","req","Please select FieldA.");  
frmvalidator.addValidation("FieldB","req","Please select FieldB.");
</script>

Everything works EXCEPT that the AJAX call breaks the validation for Field B. If Field B is not repopulated, it works fine. Field B is constructed with an include file so it is the same whether populated by the page or the AJAX call.

Thank you!

Answer 1

I suppose you are using this js library: http://www.javascript-coder.com/html-form/javascript-form-validation.phtml

If it gives you many problems, perhaps it's time to change to a more powerful validation library.

I recommend this:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Which appears in jquery webpage, and it is very complete. The syntax is more or less like this:

$("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
            agree: "Please accept our policy"
        }
    });