We Keep Coding

Javascript function not working properly. edit

I've created a registration form for users to fill in their data and submit for registration. If some fields are empty, a user name is unavailable, or if that user's email is already registered, a warning appears below the submit button, halting their process until their errors are corrected.
Below the email and username input boxes, there is a span id called emailstatus and unamestatus, respectively. If the email or user name is already registered or unavailable, a message is placed within that span informing the user. However, whether the message is shown or not, even if there is nothing wrong with the user's information, the span id status always has the message "Please correct your errors." which can be found in the javascript function signup(). Please help.
HTML:
<p>Enter personal details</p>
//cleaned up code
<input id="email" onfocus="emptyElement('status')" onblur="checkemail()" onkeyup="restrict('email')" maxlength="88" type="text" class="form-control" placeholder="Email"><span id="emailstatus"></span>
<input id="username" type="text" onfocus="emptyElement('status')" onblur="checkusername()" onkeyup="restrict('username')" maxlength="16" class="form-control" placeholder="User Name">
<span id="unamestatus"></span>
<button id="signupbtn" onclick="signup();" class="btn btn-lg btn-login btn-block">Create Account</button>
<span style="font-weight:bold;" id="status"></span>
Javascript: signup()
function signup(){
var u = _("username").value;
var e = _("email").value;
var status = _("status");
if(unamestatus.innerHTML.value != "" || emailstatus.innerHTML.value != ""){
status.innerHTML = "Please correct your errors.";
} else {
_("signupbtn").style.display = "none";
status.innerHTML = 'please wait ...';
var ajax = ajaxObj("POST", "registration.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
if(ajax.responseText != "signup_success"){
status.innerHTML = ajax.responseText;
_("signupbtn").style.display = "block";
location.href = "registration_success.php";
}
}
}
ajax.send("fn="+fn+"&ln="+ln+"&u="+u+"&e="+e+"&p="+p1+"&c="+c+"&g="+g);
}
}
Javascript: checkusername()
function checkusername(){
var u = _("username").value;
if(u != ""){
//_("unamestatus").innerHTML = 'checking ...';
var ajax = ajaxObj("POST", "registration.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
_("unamestatus").innerHTML = ajax.responseText;
}
}
ajax.send("usernamecheck="+u);
}
}
Javascript: checkemail()
function checkemail(){
var e = _("email").value;
if(e != ""){
//_("emailstatus").innerHTML = 'checking ...';
var ajax = ajaxObj("POST", "registration.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
_("emailstatus").innerHTML = ajax.responseText;
}
}
ajax.send("emailcheck="+e);
}
}

Your problem is here:
} else if(unamestatus.innerHTML.value != "" || emailstatus.innerHTML.value != ""){
status.innerHTML = "Please correct your errors.";
}
innerHTML does not have a value property. Use,
} else if(unamestatus.innerHTML != "" || emailstatus.innerHTML != ""){
status.innerHTML = "Please correct your errors.";
}
instead, however there are much better ways of doing this.

HTML Form validation using Javascript / PHP

I have set up a basic contact form which emails the form data via PHP. This works fine but I am having trouble intregrating validation script into the code to prevent the form from submitting when no data is entered.
My code so far is:
PHP to Email the data:
<?php
//validate
if(isset($_POST['submit']))
{
$to="email#testemail.com";
$name=$_REQUEST['name'];
$email=$_REQUEST['email'];
$subject="Contact Us";
$body="Name: $name \n\n Email Address: $email \n\n";
$sent=mail($to, $subject, $body);
echo 'Sent'; die;
}
//
?>
JS to post the form:
$(document).ready(function() {
$("#form1").validate({
submitHandler: function() {
//submit the form
$.post("<?php echo $_SERVER[PHP_SELF]; ?>", //post
$("#form1").serialize(),
function(data){
//if message is sent
if (data == 'Sent') {
$("#message").fadeIn(); //show confirmation message
}
//
});
return false; //don't let the page refresh on submit.
}
}); //validate the form
});
HTML Form
<div id="contact-form">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
<input type="text" id="name" name="name"/>
<input type="text" id="email" name="email"/>
<input name="submit" type="submit" title="Submit" class="submit_go" value="Submit"/>
</form>
<div id="message">Thank you for your message</div>
</div>
I have tried integrating the below validation script but this doesn't prevent the form from submitting?
Validation Script
function leftValue(e, t, n) {
$(this).text(t.parent()[0].style.left)
}
$(document).ready(function() {
required = ["name", "email"];
email = $("#email");
errornotice = $("#error");
emptyerror = "Required Field";
emailerror = "Required Field";
$("#form1").submit(function() {
for (i = 0; i < required.length; i++) {
var e = $("#" + required[i]);
if (e.val() == "" || e.val() == emptyerror) {
e.addClass("form-error");
e.val(emptyerror);
errornotice.fadeIn(750)
} else {
e.removeClass("form-error")
}
}
if (!/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("form-error");
email.val(emailerror)
}
if ($(":input").hasClass("form-error")) {
return false
} else {
errornotice.hide();
return true
}
});
$(":input").focus(function() {
if ($(this).hasClass("form-error")) {
$(this).val("");
$(this).removeClass("form-error")
}
})
});

Aside of your validation in the client you really have to do the validation on the server side all over (in PHP). There is NO guarantee whatsoever that the client side validation happens (users might even have disabled javascript completely), nor that the input comes from your page at all.
Client side validation: eye-candy for the user
Server side validation: where the real security and protection happens.
FWIW: html5 allows for client side validation by the browser.
<form [...]>
<input type="text" id="name" name="name" required="required" placeholder="Name" minlength="2" />
<input type="email" id="email" name="email" required="required" placeholder="Email" />
<input name="submit" type="submit" title="Submit" class="submit_go" value="Submit" />
</form>
More info:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Data_form_validation
https://html.spec.whatwg.org/multipage/forms.html

It might just be as simple as $(":input").hasClass("form-error") > $("input").hasClass("form-error"). I don't see anything else that would prevent this from working.
Although I'd suggest another route. Instead of adding the class form-error to the inputs, then looking for inputs with that class at the end to determine if there was an error, why not just set a boolean flag saying there was an error. That way, there's no additional DOM lookup, which is an expensive operation.
$("#form1").submit(function() {
var isValid = true;
for (i = 0; i < required.length; i++) {
var e = $("#" + required[i]);
if (e.val() == "" || e.val() == emptyerror) {
e.addClass("form-error");
e.val(emptyerror);
errornotice.fadeIn(750);
isValid = false;
} else {
e.removeClass("form-error")
}
}
if (!/^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA- Z0-9]{2,4})+$/.test(email.val())) {
email.addClass("form-error");
email.val(emailerror);
}
if (!isValid) {
return false;
} else {
errornotice.hide();
return true;
}
});

Safari hanging when running an ajax function

I have a registration form that onsubmit runs a validation javascript function to check that
a:all the boxes have a value in them.
b:the password values match.
c: the email address is valid.
The email validation script makes an ajax call to check to see if the email address has been registered before.
It runs great in all browsers except Safari. In Safari it just hangs the page.
Heres the relevant parts of the code:
html form
<form name="login" action="<?php echo htmlspecialchars($pre_link.'register3.php'); ?>" method="post" onsubmit="return validateReg();">
<div id="register_label">Email Address:<span id="req">*</span></div>
<input class="register_input" id="myregusername" name="myusername" size="14"/><br><br>
<div id="register_label">Password:<span id="req">*</span></div>
<input class="register_input" id="mypassword" name="mypassword" size="14" type="password"/><br><br>
<div id="register_label">Confirm Password:<span id="req">*</span></div>
<input class="register_input" id="mypassword1" name="mypassword1" size="14" type="password"/><br><br>
<br /><br />
<input type="submit" id="loginBtn" name="submit" value="Next" />
</form>
the js validation code
function validateReg(){
var origBorder = "1px solid #CCCCCC";
var errorBorder = "1px solid red";
var myregusername = document.getElementById("myregusername");
var mypassword = document.getElementById("mypassword");
var mypassword1 = document.getElementById("mypassword1");
var errorstr = "";
var error = false;
myregusername.style.border = origBorder;
mypassword.style.border = origBorder;
mypassword1.style.border = origBorder;
if(myregusername.value.length == 0) {
errorstr = errorstr + "\n" + "Please enter your email address";
error = true;
myregusername.style.border = errorBorder;
}
if(mypassword.value.length<=5) {
errorstr = errorstr + "\n" + "Please enter your password that is at least 6 characters long";
error = true;
mypassword.style.border = errorBorder;
}
if(mypassword1.value!=mypassword.value) {
errorstr = errorstr + "\n" + "Your passwords do not match";
error = true;
mypassword.style.border = errorBorder;
mypassword1.style.border = errorBorder;
}
if(error) {
alert(errorstr);
return false;
} else {
if (checkMail()){
return true;
} else {
return false;
}
}
}
ajax code
function checkMail(){
var myusername = document.getElementById("myregusername") ;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(myusername.value)) {
function checkMail3(){
var myusername = document.getElementById("myregusername").value ;
var filter = /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(myusername)){
$.ajax({
url: "checkregemail.php",
type: "post",
headers: { "cache-control": "no-cache" },
data:{ username : myusername },
success: function(data) {
if(data=='1'){
alert("sorry this email address has already been registered\nClick login to sign in with his email address");
document.getElementById("myregusername").focus();
return false;
}else{
alert("good email address");
return true;
}
},
error:function(){
alert("failure");
}
});
} else {
var errorBorder = "1px solid red";
var error = false;
alert('Please enter a VALID email address');
myusername.style.border = errorBorder;
return false;
}
}
} else {
var errorBorder = "1px solid red";
var error = false;
alert('Please enter a VALID email address');
myusername.style.border = errorBorder;
return false;
}
}
If I remove the ajax call, then it runs fine in Safari.
I have read about Safari caching $post's but I don't have enough knowledge to be able to incorporate what I have found into my code and get it working. I have added the 'headers: { "cache-control": "no-cache" }, ' but that still doesnt fix the issue.
if the email is registered then it throws the error message but if the email is not found in the db, it throws the 'emailk good' alert but doesnt return the true to the original statement so the form does not get submitted
Any help would be greatly appreciated.

AJax + PHP + MYSQL Newsletter subscriber

Currently I am able to add a new email address to my newsletter table, however I am struggling with the AJAX part of the query, ie. the validation.
Below is my Signup.php file:
<?php
require_once('required/init.php');
require_once('required/settings.php');
require_once('required/database.php');
require_once('required/class.phpmailer.php');
require_once('required/globals.php');
$email = trim($_REQUEST["email"]);
// Check if subscriber exists
$SQL= "select email from tblnewsletter where email='".$email."'";
$result = mysql_query($SQL);
if(!$result) {die('Problem in SQL: '.$SQL);} //just checking if there was a problem with your query
if (mysql_num_rows($result)==1) { // he was subscribed already
echo 'You are subscribed.'; // Change the message if you want.
}
else { // does not exist ==> add to the table
$SQL2= "INSERT into tblnewsletter (email) VALUES ('".$email."')";
mysql_query($SQL2);
echo 'Thank you for subscribing'; // Change the message if you want.
}
?>
and here is my Javascript:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#nlsubmit').on('click', function() {
signup();
return false;
});
});
function trim(str) {
str = str.replace(/^\s*$/, '');
return str;
}
function signup()
{
var emailentered = $("#email").val();
var email = trim(emailentered);
//EMAIL VALIDATION
var goodEmail = email.match(/\b(^(\S+#).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\.info)|(\.sex)|(\.biz)|(\.aero)|(\.coop)|(\.museum)|(\.name)|(\.pro)|(\.arpa)|(\.asia)|(\.cat)|(\.int)|(\.jobs)|(\.tel)|(\.travel)|(\.xxx)|(\..{2,2}))$)\b/gi);
var apos = email.indexOf("#");
dotpos = email.lastIndexOf(".");
lastpos = email.length - 1;
var badEmail = (apos < 1 || dotpos - apos < 2 || lastpos - dotpos < 2);
if (email == "" || !goodEmail || badEmail)
{
//Email address fails
$('myResponse').style.display = 'inline';
$('myResponse').style.color = 'red';
alert('Please enter a valid email');
$('email').focus();
return false;
}
else
{
email = encodeURIComponent(email);
//Email address succeeds
$.ajax({
url: "signup.php?email=" + email,
success: function(result) {
alert('here');
$('#myResponse').show();
$("loading").show();
return false;
}
});
}
}
function showResponse(req) {
$("loading").hide();
$("myResponse").innerHTML = req.responseText;
$("myResponse").style.display = "inline";
$("myResponse").style.color = "blue";
$("submit").show();
$("email").invoke('clear');
}
function showException(req) {
$("myResponse").innerHTML = req.responseText;
alert("An error occured while talking to the server. Please try again.");
$("loading", "myResponse").invoke('hide');
$("submit").show();
$("email").invoke('clear');
}
</script>
The form that is calling all this is as follows:
<form method="post" name="subform" id="subform" action="">
<input type="text" id="email" name="email" value="">
<input type="submit" id="nlsubmit" name="submit" value="Sign up">
<div id="myResponse" style="display:none;"></div>
<div id="loading" style="display:none;"><img src="/images/wait.gif" alt=""></div>
</form>
Like I said the newsletter table is updated great, though I'm needing the user to be notified on the same page if they are already present, if the email is invalid etc.

In your function:
$.ajax({
url: "signup.php?email=" + email,
success: function(result) {
alert('here');
$('#myResponse').show();
$("loading").show();
return false;
}
});
'result' refers to whatever was echoed on signup.php, so if result=="You are subscribed." that means that the email address already exists in the database, otherwise if result=="Thank you for subscribing" the email address is new to the database and the new user subscribed. So the function should look something like this:
$.ajax({
url: "signup.php?email=" + email,
success: function(result) {
if(result=="You are subscribed.")
{
// notify user that email address already exists
}
alert('here');
$('#myResponse').show();
$("loading").show();
return false;
}
});

Unable to Ajax Call Using Jquery

I am trying to do login with the help of Jquery ajax, but at the time of making ajax call using method jQuery.ajax(....) with servlet (Java) this method was unable to call. I am using ajax lib from link http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js.
Every time I am getting the below URL in address bar of browser.
Project/?email=abc88%40gmail.com&password=1234&sendbtn=Send+Message
Below is the Jquery Ajax Code.
$(document).ready(function() {
//global vars
var username=jQuery("#email");
var password=jQuery("#password");
function checkLoginForm() {
if(username.attr("value") && password.attr("value")) {
return true;
} else {
return false;
}
}
jQuery(".txtbar, .txtbox").live("focus", function() {
var thelabel = jQuery(this).prev();
var infobox = jQuery(this).next();
var rowbox = jQuery(this).parent();
var currid = jQuery(this).attr('id');
var pxlchange = '-45px';
rowbox.addClass('colors');
thelabel.animate({left: pxlchange}, 350, 'linear', function() {});
// The animation is completed
infobox.animate({opacity: 1.0}, 350, 'linear', function() {
// The animation is completed
});
}
jQuery(this).live("keyup", function() {
var theval = jQuery(this).val();
var limitval = 3;
var replacehtml = "";
var emailinfohtml = "Enter a valid e-mail address.";
var subjectinfohtml = "Enter Password.";
if(currid == "email") {
replacehtml = emailinfohtml;
} else if(currid == "password") {
replacehtml = subjectinfohtml;
limitval = 2;
}
// checking against e-mail regex
if(currid == "email") {
if(checkValidEmailAddress(theval)) {
infobox.html("Looks good!");
infobox.addClass('good');
} else if(!checkValidEmailAddress(theval)) {
infobox.html(replacehtml);
infobox.removeClass('good');
}
} else {
// we use this logic to check for name+message fields
if(theval.length >= limitval) {
infobox.html("Looks good!");
infobox.addClass('good');
} else if(theval.length < limitval) {
infobox.html(replacehtml);
infobox.removeClass('good');
}
}
// now we check if we can display the send button
// much easier to just look for 'good class on the req fields
});
});
jQuery(".txtbar, .txtbox").live("blur", function() {
var thelabel = jQuery(this).prev();
var infobox = jQuery(this).next();
var rowbox = jQuery(this).parent();
var currid = jQuery(this).attr('id');
rowbox.removeClass('colors');
infobox.animate({opacity: 0}, 400, 'linear', function() {
// The animation is completed
});
});
jQuery("#sendbtn").click(function() {
if (checkLoginForm()) {
jQuery.ajax({
type : "GET",
url : "/DoLogin.htm",data:"userName="+ username.val()+ "&password="+ password.val(),
success : function(msg) {
alert("Ajax Return Success");
return false;
}
});
} else {
alert("Ajax Return Fail Code ");
return false;
}
});
function checkValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+") ([\w-+]+(?:\.[\w-+]+)*))(#((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
return pattern.test(emailAddress);
};
HTML code:
<div id="wrap">
<form id="contact-form" name="contact-form">
<div class="rowbox">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" class="txtbar req" tabindex="1">
<div class="infobox">
Enter a valid e-mail address
</div>
</div>
<div class="rowbox">
<label for="subject">Password</label>
<input type="password" id="password" name="password" class="txtbar" tabindex="1">
<div class="infobox">
Enter Password
</div>
</div>
<input type="submit" value="Send Message" id="sendbtn" name="sendbtn" class="submit-button">
</form>
</div>

If you make the data property an object, jQuery will handle parameterizing and URI-encoding it for you automatically. If you insist on it being a string, you need to do all of that yourself.
jQuery.ajax({
type: "GET",
url: "/DoLogin.htm",
data: { userName: username.val(), password: password.val() },
success: function() {
alert("Ajax Return Success");
}
});
On a security note, I wouldn't simply check that the #email and #password fields have value attributes and return true, nor would I transmit plain-text login info over the wire. Maybe you intended this as boilerplate code to get things working and you'll validate/encrypt them better later. :)