AJAX newbie needs help with form validation!

[metazai]

Trying to validate a form without resubmitting -- part of what I'm validating is information that's in the database. Unfortunately, it submits even when it fails the "checks". Does anyone see the obvious newbie error I am making?

<script language="JavaScript" type="text/javascript">
<!--
function createRequestObject() {  

       var req;  
     
       if(window.XMLHttpRequest){  
          // Firefox, Safari, Opera...  
          req = new XMLHttpRequest();  
       } else if(window.ActiveXObject) {  
          // Internet Explorer 5+  
          req = new ActiveXObject("Microsoft.XMLHTTP");  
       } else {  
          // There is an error creating the object,  
          // just as an old browser is being used.  
          alert('Problem creating the XMLHttpRequest object');  
       }  
     
       return req;  
     
    }  

 var http = createRequestObject();  
  
function numcheck()
{ var myurl='includes/checklogin_new.php';
 // Create rand variable to avoid cach problems
myRand=parseInt(Math.random()*999999999999999);
var modurl=myurl+"?rand="+myRand+"&firstname="+firstname+"&lastname="+lastname+"&email="+email+"&customername="+customername+"&customerpassword="+customerpassword+"&customerpassword_verify="+customerpassword_verify;
http.open("GET", modurl);
http.onreadystatechange = useHttpResponse;
http.send(null);
}

function useHttpResponse()
{ if(http.readyState == 4 && http.status == 200){ 
var errorvalue= http.responseText;
if (errorvalue) {
document.getElementById('errorcode').innerHTML=errorvalue;
return false; } else {
  document.form1.submit();
}
}}
-->
</script>

And here's the submitting form:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="1">
                <tr>
                  <form name="form1" method="post" action="includes/publish.php" onSubmit="javascript:return numcheck(this.form)">
                    <td align="center"></td>
                    <td align="center"><table border="0" cellpadding="3" cellspacing="0">
                        <tr>
                          <td align="right" valign="middle"><div align="right">Please Enter your First Name:</div></td>
                          <td align="left" valign="middle"><input name="firstname" type="text" id="firstname"></td>
                        </tr>
                        <tr>
                          <td align="right" valign="middle"><div align="right">Please Enter your Last Name:</div></td>
                          <td align="left" valign="middle"><input name="lastname" type="text" id="lastname"></td>
                        </tr>
                        <tr>
                          <td align="right" valign="middle"><div align="right">Please Enter Email:</div></td>
                          <td align="left" valign="middle"><input name="email" type="text" id="email"></td>
                        </tr>
                        <tr>
                          <td colspan="2" align="center" valign="middle"><span class="style1">User Name MUST be your Plan Sponsor Name</span></td>
                        </tr>
                        <tr>
                          <td align="right" valign="middle"><div align="right">Please Enter a Username:</div></td>
                          <td align="left" valign="middle"><input name="customername" type="text" id="customername"></td>
                        </tr>
                        <tr>
                          <td align="right" valign="middle"><div align="right">Please Enter a Password:</div></td>
                          <td align="left" valign="middle"><input name="customerpassword" type="password" id="customerpassword"></td>
                        </tr>
                        <tr>
                          <td><div align="right">Please Verify your Password: </div></td>
                          <td><input name="customerpassword_verify" type="password" id="customerpassword_verify"  autocomplete="off">
                          </td>
                        </tr>
                        <tr>
                          <td>&nbsp;</td>
                          <td><input type="submit" value="Create Login"></td>
                        </tr>
                      </table></td>
                  </form>
                </tr>
              </table>
              <div id="errorcode"></div>

[sde]

just make numcheck return false.

it looks like if the validation is good, you are manually submitting the form from the response.

[sde]

after thinking about it a little more.. i'm thinking that onsubmit() may get fired again when you do form.submit() which would cause a loop.

if that is the case, then i'd say you need to set a js variable outside the scope of the function to track if the data is valid.

for example:

var form_is_valid = false;

function createRequestObject() {  

  if (form_is_valid) {
    return true;
  }

  // .... rest of code for this function
}

function useHttpResponse() {

  ...
  // on successful validation, set form_is_valid and re-submit form
  form_is_valid = true;
  document.form1.submit();
}

i haven't actually tested this stuff.. so only try this if my first suggestion fails.

[metazai]

The problem here, with either of the solutions, is that it breaks the form -- it doesn't post a response OR submit the form, correct or incorrect. It's given me a few ideas to play around with though, but if something else occurs, please let me know.

[metazai]

Well, I solved it . . . after a lot of jiggery-pokery, I got this:

<script language="JavaScript" type="text/javascript">
<!--
function createRequestObject() {  

       var req;  
     
       if(window.XMLHttpRequest){  
          // Firefox, Safari, Opera...  
          req = new XMLHttpRequest();  
       } else if(window.ActiveXObject) {  
          // Internet Explorer 5+  
          req = new ActiveXObject("Microsoft.XMLHTTP");  
       } else {  
          // There is an error creating the object,  
          // just as an old browser is being used.  
          alert('Problem creating the XMLHttpRequest object');  
       }  
     
       return req;  
     
    }  

 var http = createRequestObject();  
  
function numcheck()
{ var myurl='includes/checklogin_new.php';
 // Create rand variable to avoid cach problems
myRand=parseInt(Math.random()*999999999999999);
var modurl=myurl+"?rand="+myRand+"&firstname="+form1.firstname.value+"&lastname="+form1.lastname.value+"&email="+form1.email.value+"&customername="+form1.customername.value+"&customerpassword="+form1.customerpassword.value+"&customerpassword_verify="+form1.customerpassword_verify.value;
http.open("GET", modurl);
http.onreadystatechange = useHttpResponse;
http.send(null);
}

function useHttpResponse()
{ if(http.readyState == 4 && http.status == 200){ 
var errorvalue= http.responseText;
if (errorvalue != "noerror") {
document.getElementById('errorcode').innerHTML=errorvalue;
return false; } else {
document.getElementById('errorcode').innerHTML="<strong>Processing . . . </strong>";
  document.form1.submit();
}
}}
-->
</script>

And this:

<form name="form1" form id="form1" method="post" action="includes/publish.php">
...
<input type="button" value="Create Login" onClick="javascript:numcheck(this.form);">

<div id="errorcode"></div>

Seems to be the order of the things and the way they were being submitted that made the difference. Thanks for the push in the right direction, SDE!

[sde]

great news. thanks for the update.