Jump to content


Photo

validate form with ajax


  • Please log in to reply
3 replies to this topic

#1 .josh

.josh
  • Staff Alumni
  • .josh
  • 14,871 posts

Posted 28 May 2006 - 01:48 AM

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.

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

<html>
<head>
<title>Untitled</title>
<!-- *** CSS ********************************* -->
<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>
<!-- *************** end css ******************-->
</head>

<script lang='javascript'>
<!-- *****************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);
    }
     <!--DISPLAY ERROR OR SUBMIT BUTTION-->
    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" />';
    }
} 


<!--TRIM ALL LEADING AND FOLLOWING WHITESPACE IN A STRING-->
function trimString (str) {
  return str.replace(/^s+/g, '').replace(/s+$/g, '');
}

<!--HIGHLIGHT EMPTY FIELDS THAT ARE REQUIRED-->
function hiliteRequired(startValFROM,place){
    <!--DEFINE THE ID'S OF THE REQUIRED FIELDS-->
    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;
            }
        }
    }
    <!--HIGHLIGHT EMPTY FIELDS-->
    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');
        }
    }
    <!--FIX FOR IF THE USER WERE TO NAVIGATE THE FORM IN REVERSE-->
    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');
        }
    }
} 

<!-- **************** AJAX *********************** -->

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();
        <!--LOOP THROUGH THE RESPONSES-->
                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');
                }
            }
        }
    }
}
<!-- **********************END AJAX ******************--> 


</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>

Did I help you? Feeling generous? Buy me lunch! 
Please, take the time and do some research and find out how much it would have cost you to get your help from a decent paid-for source. A "roll-of-the-dice" freelancer will charge you $5-$15/hr. A decent entry level freelancer will charge you around $15-30/hr. A professional will charge you anywhere from $50-$100/hr. An agency will charge anywhere from $100-$250/hr. Think about all this when soliciting for help here. Think about how much money you are making from the work you are asking for help on. No, we do not expect you to pay for the help given here, but donating a few bucks is a fraction of the cost of what you would have paid, shows your appreciation, helps motivate people to keep offering help without the pricetag, and helps make this a higher quality free-help community :)

#2 brown2005

brown2005
  • Members
  • PipPipPip
  • Advanced Member
  • 943 posts

Posted 06 July 2006 - 08:43 AM

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

#3 deejay1111

deejay1111
  • New Members
  • Pip
  • Newbie
  • 3 posts

Posted 06 July 2006 - 09:41 AM

try ajaxtalk.com
get help at www.ajaxtalk.com

#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 06 July 2006 - 06:17 PM

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
                document.getElementById(UPDATE[0]+'_container').innerHTML = "";
                if(trimString(document.getElementById(UPDATE[0]+'_container').value) != ""){
                    dispSubmit(UPDATE[0],'remove');
                }

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

NoGray.com





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users