validate form with ajax

.josh · May 28, 2006

okay i initially posted this question at ajaxfreaks.com but it seems nobody really ever goes over there.. I guess it just hasn't quite caught on yet [img src=\"style_emoticons/[#EMO_DIR#]/huh.gif\" style=\"vertical-align:middle\" emoid=\":huh:\" border=\"0\" alt=\"huh.gif\" /] well i personally do not think my bug is with the ajax script so i thought maybe i'd post it here and see if anybody can help.

so like, i'm learning some ajax to include on my website, so i'm making this register form validation script. the javascript is setup where the submit button will show only if all of the required fields are filled, and the user/email is valid.

The ajax part works fine. onblur calls the ajax functions to check if my user/email exists in the database and it does, and the correct stuff is returning and displaying.

all of the other required fields work fine. they are highlighted if you skip them, and they stop being highlighted if you fill something out... except for the user/email fields.

For some reason, even though the proper message is returned from the validate_sql.php and it is displayed properly, javascript is not showing them as validly filled out fields, and therefore the submit button is not showing.

here is a linkie to my script:

[a href=\"http://www.chroniclesofwar.com/test/testform.php\" target=\"_blank\"]http://www.chroniclesofwar.com/test/testform.php[/a]

try for instance using 'crayonviolent' in the user name field. it will say that it is already taken, and the box will highlight red. so if you go back and enter in a name that is not taken, it will output '!error' meaning the name is okay. but the box stays red, and the submit form will not show.

[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<style type="text/css">
#userfield, #emailfield{
    color: #000000;
    float:left;
}
#user_container, #email_container{
    float:left;
}
.error{
    border: 2px solid #FF0000;
    background-color:#FEDADB;
}
.skipped{
    border: 2px solid #FF0000;
    background-color:#00CCFF;
}
.noclass{
    color: #000000;
}
#submitholder{
    color: #000000;
}
</style>

</head>

<script lang='javascript'>


var problemArray = new Array();

function dispSubmit(field,action){
    if(problemArray.length != 0){
        for(var i = 0; i < problemArray.length; i++){
            if(problemArray[i] == field){
                place = i;
                break;
            }else{
                place = -12;
            }
        }
    }else{
        place = -50;
    }
    if(action == "add" && place < 0){
        problemArray.splice(problemArray.length,0,field);
    }else if(action == "remove" && place >= 0){
        problemArray.splice(place,1);
    }
     
    if(problemArray.length != 0){
        document.getElementById('submitholder').innerHTML = "There seems to be a problem with one or more of your fields";
    }else{
        document.getElementById('submitholder').innerHTML = '<input type="submit" name="Submit" value="Submit" />';
    }
}


function trimString (str) {
  return str.replace(/^s+/g, '').replace(/s+$/g, '');
}


function hiliteRequired(startValFROM,place){
    
    var requiredFields = new Array()
        requiredFields[0] = "userfield"
        requiredFields[1] = "emailfield"
        requiredFields[2] = "testfield"
        requiredFields[3] = "testoption"

    var pos = requiredFields.length;
    for(var i = 0; i < requiredFields.length; i++){
        if(requiredFields[i] == startValFROM){
            pos = i;
        }else{
            if (pos > place){
                pos = place;
            }else{
                pos = pos;
            }
        }
    }
    
    for(var x = 0; x < pos; x++){
        if(trimString(document.getElementById(requiredFields[x]).value) == ""){
            document.getElementById(requiredFields[x]).className = 'skipped';
            dispSubmit(requiredFields[x],'add');
        }else if(document.getElementById(requiredFields[x]).className != "error"){
            document.getElementById(requiredFields[x]).className = 'noclass';
            dispSubmit(requiredFields[x],'remove');
        }
    }
    
    for(var y = 0; y < requiredFields.length; y++){
        if(trimString (document.getElementById(requiredFields[y]).value) != "" && document.getElementById(requiredFields[y]).className != "error"){
            document.getElementById(requiredFields[y]).className = 'noclass';
            dispSubmit(requiredFields[y],'remove');
        }
    }
}



function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function validateForm(txtfield){
    var url = 'validate_sql.php?field=';
    var url2;
    var username = document.getElementById('userfield').value;
    var email = document.getElementById('emailfield').value;

    if (txtfield == "userfield"){
        url2 = txtfield+unescape("%26userfield=")+username;
    }else if(txtfield == "emailfield"){
        url2 = txtfield+unescape("%26emailfield=")+email;
    }

    url += url2;
    http.open('get', url);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var UPDATE = new Array();
        
                if(response.indexOf('|' != -1)) {
            UPDATE = response.split('|');
            if(UPDATE[1] != '!error'){
                document.getElementById(UPDATE[0]).className = 'error';
                document.getElementById(UPDATE[0]+'_container').innerHTML = UPDATE[1];
                dispSubmit(UPDATE[0],'add');
            }else if(UPDATE[1] == '!error'){
                if(document.getElementById(UPDATE[0]).className != 'skipped'){
                    document.getElementById(UPDATE[0]).className = 'noclass';
                }
                document.getElementById(UPDATE[0]+'_container').innerHTML = "";
                if(trimString(document.getElementById(UPDATE[0]+'_container').value) != ""){
                    dispSubmit(UPDATE[0],'remove');
                }
            }
        }
    }
}


</script>
<body>

<form action="" method="get">
<table width="776" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td width="258">Username: *req* </td>
    <td width="497"><input type="text" name="user" id="userfield" onblur="validateForm('userfield');" onfocus="hiliteRequired('userfield')" /><div id="userfield_container"></div></td>
  </tr>
  <tr>
    <td>Email: *req* </td>
    <td><input type="text" name="email" id="emailfield" onblur=" validateForm('emailfield');" onfocus="hiliteRequired('emailfield')" /><div id="emailfield_container"></div></td>
  </tr>
  <tr>
    <td>What color is your shirt?: </td>
    <td><input type="text" name="textfield" onfocus="hiliteRequired('color',2)"  />    </td>
  </tr>
  <tr>
    <td>required (but not defined): </td>
    <td><input type="text" name="test" id="testfield" onfocus="hiliteRequired('testfield')" /></td>
  </tr>
  <tr>
    <td>required drop down: </td>
    <td>
    <select name="testoption" id="testoption" onfocus="hiliteRequired('testoption')">
      <option value=""></option>
      <option value="test">test</option>
    </select>    </td>
  </tr>
  <tr>
    <td>not required: </td>
    <td><input type="text" name="test" id=”testfield2” onfocus="hiliteRequired('testfield2',5)" /></td>
  </tr>
  <tr>
    <td> </td>
    <td><div id="submitholder"></div></td>
  </tr>
</table>
</form>

</body>
</html>
[/code]

brown2005 · July 6, 2006

Hi, I was wondering if you had got an answer on this yet, as I am using the same script and have the same problem...

Thanks

deejay1111 · July 6, 2006

try [url=http://www.ajaxtalk.com]ajaxtalk.com[/url]

nogray · July 6, 2006

The error is in the ajax part, I copied your code and removed the ajax part and seems to work (not sure if it's right, but the error problem is gone).

One of the problem may be in this statement
[code]
document.getElementById(UPDATE[0]+'_container').innerHTML = "";
if(trimString(document.getElementById(UPDATE[0]+'_container').value) != ""){
dispSubmit(UPDATE[0],'remove');
}
[/code]

I don't think you need the _container in the getElementById(UPDATE[0]+'_container').value since you checking the field and not the container.

Sign In

validate form with ajax

Recommended Posts

.josh

Link to comment

Share on other sites

brown2005

Link to comment

Share on other sites

deejay1111

Link to comment

Share on other sites

nogray

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information