javascript form validation and ajax send

[xstevex]

Hi,

I'm trying to make a simple contact form with two bits of code I found. The first is javascript which validates that the required fields have been entered and displays a red "required" text over the field if info is missing. And the second is the Ajax that sends the email.

 

I can get them to work separately (either one or the other but not both together).

 

Is there a way to join the two pieces of code so that if the first returns true (that all required fields have been entered) it then proceeds to the second. But if the first is not true (missing info in the form fields) then it doesn't go to the second code which sends the email?

 

This is my two javascripts:

<script language="javascript" type="text/javascript">
<!--
function checkForm() {
error = 0;
document.getElementById("emailprob").style.display = "none";
document.getElementById("messageprob").style.display = "none";
if (document.form1.email.value == "") {
document.getElementById("emailprob").style.display = "inline";
error = 1;
}
if (document.form1.message.value == "") {
document.getElementById("messageprob").style.display = "inline";
error = 1;
}
if (error == 1) return false;
return true;
}
-->
</script>




<script language="javascript" type="text/javascript">

//  You don't need to change anything in this function:
function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    // Mozilla/Safari
    if (window.XMLHttpRequest) {
        self.xmlHttpReq = new XMLHttpRequest();
    }
    // IE
    else if (window.ActiveXObject) {
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
    }
    self.xmlHttpReq.send(getquerystring());
}
//   The following function obtains two variables from your form (email and message) 
//   and builds a string that gets sent to your PHP script.  Change this function to
//   obtain whatever fields you want from your form.
function getquerystring() {
    var form     = document.forms['form1'];
    var email = form.email.value;
    var message = form.message.value;
    qstr = 'email=' + escape(email) + '&message=' + escape(message); 
    return qstr;
}
function updatepage(str){
    document.getElementById("result").innerHTML = str;
document.form1.reset();//I added this
}
</script>

 

And this is my html:

<form name="form1">
<div>
<span>Email:</span><span id="emailprob" style="display:none;color:#FF0000;"> (required)</span><br />
<input type="text" name='email' />
</div>
<div>
<span>Message:</span><span id="messageprob" style="display:none;color:#FF0000;"> (required)</span><br />
<textarea class="inputarea" name='message' rows="10" >
</textarea>
</div>
<input value="Go" type="button" onclick='javascript:xmlhttpPost("ajax-send-email.php")'>
<div id="result"></div>
</form>

 

The first bit of javasript (field input validation) isn't being used right now because as I said I haven't been able to get them to work together.

 

Thanks,

Steve.

[vurentjie]

try this, only going to do it for textarea

 

<div id='txterr' style='display:none;'>this textarea must be filled</div>
<form>
<textarea onchange='check(this.form.mytxt,'txterr');' name='mytxt'></textarea>
</form>


//js
function check(where,what){
var err = document.getElementById(what);

   if(where.value == ""){   
       err.style.display = 'block';
   }
   else
   {
    err.style.display = 'none';
   }
}