Develop Reference

Checking if the input fields are filled in properly (pure javascript)

I almost complete the form validation, but the only pain in the ass for me is:
1) Input fields should be checked themselves when some have filled in the input field and click outside the input box.
2) when someone leaves all the input fields empty and clicked on the send button.
Anyone an idea how I can fixed that?
function validateForm() {
var name = document.getElementById("name");
var email = document.getElementById("email");
var nameValidation = document.getElementById("nameValidation");
var emailValidation = document.getElementById("emailValidation");
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (name.value.length == "") {
nameValidation.innerHTML = " Please fill in your name";
name.focus();
} else {
nameValidation.innerHTML = " Right";
}
if(!filter.test(email.value) || (email.value.length == "")) {
emailValidation.innerHTML = " Please enter a valid email address";
email.focus();
}
else {
emailValidation.innerHTML = " Right!";
}
}
<form action="#" id="form" method="post" name="form">
<img id="close" src=IMAGE/close.png alt="close-button" onclick="div_hide()"/>
<h3><b>Application form</b></h3>
<input id="name" class="application" name="name" placeholder="Name" type="text" maxlength="30" /><span id="nameValidation"></span><br/>
><input id="email" class="application" placeholder="Email" type="text" maxlength="254" /><span id="emailValidation"></span>
<div id="upload-box">
<input id="upload" class="application upload" type="file"/>
<input id="submit" class="application apply-button" type="button" onclick="validateForm()" value="Send"/>
</div>
</form

<input type="email" required />
Job done.

html5 form not working properly

I have a search form on every page of my website which works perfectly, when submitting the form it goes to a page called search.php..
I have the same form also on my contact page where i also have a contact form.
the contact form does not have a submit button because i use ajax to send the post variables to a contact_process.php page. The contact form is working perfectly however on this page the search form does not work.. When I press the submit button on the search form it just refreshes the whole contact page instead of going to the search.php page. can anyone help? thanks.
The javascript and ajax for contact form:
document.getElementById('submit_message').addEventListener('click', sendMessage, false);
function sendMessage(){
$('#submit_message').removeClass("point_finger_animation");
$('#pointing_finger').fadeOut();
xmlhttp = createXHR();
xmlhttp.onreadystatechange = callback;
var not_valid_email = false;
var your_name = document.getElementById("your_name").value;
var captcha_code = document.getElementById("captcha_code").value;
var subject = document.getElementById("subject").value;
var email = document.getElementById("email").value;
var mobile_number = document.getElementById("mobile").value;
if(mobile_number.length < 10 || mobile_number.length > 14){
var not_valid_mobile = true;
}
var atpos=email.indexOf("#");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length){
var not_valid_email = true;
}
var message = document.getElementById("message").value;
xmlhttp.open("POST", "contact_process.php" ,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if((your_name == "" || your_name == null) || (not_valid_mobile) || (not_valid_email) || (message == "" || message == null)){
$('#container_wrapper').scrollTop(0);
document.getElementById("form_results").innerHTML = "<p>Message not sent!</p>";
if(your_name == "" || your_name == null){
document.getElementById("form_results").innerHTML = "<p>Oops! You forgot to fill in a required field!</p>";
}else if(not_valid_email){
document.getElementById("form_results").innerHTML = "<p>The email address you entered is invalid!</p>";
}else if(not_valid_mobile){
document.getElementById("form_results").innerHTML = "<p>The mobile number you entered is invalid!</p>";
}else if(message == "" || message == null){
document.getElementById("form_results").innerHTML = "<p>Oops! You forgot to fill in a required field!</p>";
}
}else{
xmlhttp.send("your_name=" + your_name + "&email=" + email + "&mobile=" + mobile_number + "&subject=" + subject + "&message=" + message + "&captcha_code=" + captcha_code);
}
}
function callback(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
refreshCaptcha();
document.getElementById("form_results").innerHTML = xmlhttp.responseText;
$('#container_wrapper').scrollTop(0);
}
}
html for contact form
<section id="form_area" class="content_box">
<div id="form_results"></div>
<form id ="contact_form" method="post" action="">
<label>Your Name (required)</label>
<input id="your_name" name="your_name" type="text" placeholder="Your Name" onfocus = "checkEnter()">
<label>Your Email (required)</label>
<input id="email" name="email" type="email" placeholder="Email" onfocus = "checkEnter()">
<label>Mobile Number (required)</label>
<input id="mobile" name="mobile" type="text" placeholder="Mobile Number" onfocus = "checkEnter()">
<label>Subject</label>
<input id="subject" name="subject" type="text" placeholder="Subject (Optional)" onfocus = "checkEnter()" >
<label>Your Message (required)</label>
<textarea id="message" name="message" rows="4" type="text" placeholder="Please leave your message here" onfocus = "checkEnter()"></textarea>
<label>Please enter the Captcha below (required). Letters are not case sensitive.</label>
<div id="captcha_wrapper">
<img id="captcha" src="/finalne2/securimage/securimage_show.php" alt="CAPTCHA Image" />
<span id="captcha_refresh"><i class="fa fa-refresh"></i></span>
</div>
<input id="captcha_code" type="text" name="captcha_code" size="10" maxlength="6" onfocus = "checkEnter()" onblur = "checkFields()"/>
<div id="submit_area">
<div id="submit_message" class="menu_level_1 button_style">Send</div>
<div id="pointing_finger"><i class="fa fa-hand-o-left"></i></div>
</div
</form><!--End of contact_form-->
</section><!--End of form_area-->
html for search form:
<div id="search_wrapper" class="menu_level_1">
<div id="search_box">
<form action="search.php" method="get">
<input id="search_content" placeholder="Search website" type="text" name="query" size="40" value="" action="" columns="2" autocomplete="off" delay="1500">
<button id="submit_search" type="submit"><i class="fa fa-search"></i></button>
<input type="hidden" name="search" value="1">
</form>
</div>
</div>
Update:
#Malk thanks for spotting the missing bracket in the closing div of the contact form :) that was indeed the problem :)

Just a guess but maybe try specifying an explicit action attribute in the contact form.
<form id ="contact_form" method="post" action="some_page_here">

Can't get captcha to work - can submit even with wrong answer

I have a website I designed with a contact form on almost every page. The form has been getting hit with a lot of spam lately, so I want to add in a captcha - but Google's free reCaptcha sucks, so I want to use a better one.
I found this and want to use it:
http://jsfiddle.net/M5rvh/23/
HTML
<form action="php/contactus.php" method="post" name="contact_form" id="contact_form">
<h2>Contact Us</h2>
<br>
<h5>Full Name *</h5>
<input type="text" name="name" class="text" placeholder="John Doe" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" required />
<h5>Association Name *</h5>
<input type="text" name="association" class="text" placeholder="HOA Name" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" required />
<h5>Email Address *</h5>
<input type="text" name="email" class="text" placeholder="youremail#email.com" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" required />
<h5>Phone Number *</h5>
<input type="text" name="phone" class="text" placeholder="555-555-5555" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" required />
<h5>Message *</h5>
<textarea name="message" rows="6" onfocus="if (this.value==this.defaultValue) this.value='';" onblur="if (this.value=='') this.value=this.defaultValue;" required>Our HOA Concerns Are...</textarea>
<h5 class="captchaclass">Captcha *</h5>
<div class="submit">
<input type="image" src="images/button-submit_s1.jpg" alt="Submit" value="Submit" />
</div>
</form>
JAVASCRIPT
<script type="text/javascript">
$(function(){
var mathenticate = {
bounds: {
lower: 5,
upper: 50
},
first: 0,
second: 0,
generate: function()
{
this.first = Math.floor(Math.random() * this.bounds.lower) + 1;
this.second = Math.floor(Math.random() * this.bounds.upper) + 1;
},
show: function()
{
return this.first + ' + ' + this.second;
},
solve: function()
{
return this.first + this.second;
}
};
mathenticate.generate();
var $auth = $('<input type="text" name="auth" required />');
$auth
.attr('placeholder', mathenticate.show())
.insertAfter('h5[class="captchaclass"]');
$('#contact_form').on('submit', function(e){
e.preventDefault();
if( $auth.val() != mathenticate.solve() )
{
alert('wrong answer!');
}
});
})
</script>
I have tried to get this to work on this page (http://wmdouglas.org/apex.html) but it does not work right no matter what I try. The captcha shows up and is required to complete before submitting, but I can enter in the wrong answer and it still goes to my success page afterwards.
What is going on?

Javascript form submission

I have a form that posts its data to Sugar CRM. The data is being successfully submited in Firefox but not redirecting correctly. In Chrome the data is not being submitted but is redirecting correctly.
<form method="POST" class="brochurelead webtoleadform" name="WebToLeadForm" id="WebToLeadForm">
<fieldset>
<label for="firstname">First name*:</label>
<input type="text" name="first_name" id="first_name" />
<br />
<label for="lastname">Last name*:</label>
<input type="text" name="last_name" id="last_name" />
<br />
<label for="phone_work">Primary phone*:</label>
<input type="text" name="phone_work" id="phone_work" onchange="validateHuman();"/>
<br />
<label for="email">Email*:</label>
<input type="text" name="email1" id="email1" onchange="validateEmailAdd();" />
<span style="padding-left:268px"><input type="submit" value="Download" name="Submit" class="button" onclick="submit_form();" />
</fieldset1>
<input type="hidden" name="lead_source" id="lead_source" value="Brochure Download" />
<input type="hidden" name="user" id="user" value="lead_capture_form" />
<input type="hidden" value="dbce057c" name="campaign_id" id="campaign_id" />
<input type="hidden" value="http://www.somewebsite.com/somearticle" name="redirect" id="redirect" />
<input type="hidden" value="blahblah" name="assigned_user_id" id="assigned_user_id" />
<input type="hidden" value="first_name;last_name;phone_work;email1;" name="req_id" id="req_id" />
<input type="hidden" value="<?php echo $article->category; ?>" name="area_of_interest_c" id="area_of_interest_c">
<input type="hidden" name="probability_c" id="probability_c" value="1" />
<input type="hidden" id="human" name="human" value="0">
</form>
This is my javascript for handling the form:
function submit_form(){
if(typeof(validateCaptchaAndSubmit)!='undefined'){
validateCaptchaAndSubmit();
}else{
check_webtolead_fields();
}
}
function check_webtolead_fields(){
if(document.getElementById('req_id') != null){
var reqs=document.getElementById('req_id').value;
reqs = reqs.substring(0,reqs.lastIndexOf(';'));
var req_fields = new Array();
var req_fields = reqs.split(';');
nbr_fields = req_fields.length;
var req = true;
for(var i=0;i<nbr_fields;i++){
if(document.getElementById(req_fields[i]).value.length <=0 || document.getElementById(req_fields[i]).value==0){
req = false;
break;
}
}
if(req && document.getElementById('human').value == '50'){
document.WebToLeadForm.action = "http://crm.somewebsite.com/index.php?entryPoint=WebToLeadCapture";
document.WebToLeadForm.submit();
window.location = document.getElementById('redirect').value;
return true;
}
else{
alert('Please provide all the required fields');
return false;
}
return false
}
else{
document.WebToLeadForm.action = "http://crm.somewebsite.com/index.php?entryPoint=WebToLeadCapture";
document.WebToLeadForm.submit();
window.location = document.getElementById('redirect').value;
}
}
function validateEmailAdd(){
if(document.getElementById('email1').value.length >0) {
if(document.getElementById('email1').value.match(/^\w+(['\.\-\+]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,})+$/) == null){
alert('Not a valid email address');
}
}
}
function validateHuman(){
document.getElementById('human').value = "50";
}

Because you are submitting a form and trying to set the page's location at the same time. That is not going to happen. It is a race condition!
Either you will have to submit the form with Ajax can on the response you redirect OR you need the serverside to actually do the redirection!

Form validation with Javascript function

I am trying to validate a form, to make sure that the user inputs a value into a textbox. Here's my Javascript:
var formValidation = function(a) {
if (document.getElementById(a).value == "") {
alert('Please fill out the ' + a + ' field');
return false;
}
else {
return true;
}
}
And here's the form:
<div id="cultdiv">
<form action="add.php" method="POST">
<span><input type="hidden" name="id" id="cultid"/>
<input type="text" onSubmit ="formValidation('culture')" name="name" id="culture"/>
<input type="hidden" name="type" value="culture" />
<input type="submit" value="add/update" /></span>
</form>
</div>
For some reason it doesn't stop the form from being submitted or give the alert message.

You forgot to return from your inline handler.
Also, <input>s don't have an onsubmit event; you probably meant to put that in the <form>.

slaks means something along these lines.
<script>
var formValidation = function() {
if (document.getElementById('culture').value == "") {
alert('Please fill out the culture field');
return false;
}
else {
return true;
}
}
<div id="cultdiv">
<form action="add.php" method="POST" onsubmit="return formValidation(this)">
<span><input type="hidden" name="id" id="cultid"/>
<input type="text" name="name" id="culture"/>
<input type="hidden" name="type" value="culture" />
<input type="submit" value="add/update" /></span>
</form>
</div>