JavaScript form validation with a shake effect - javascript

I have some JavaScript form validation I'm using before I send it across to my PHP. (I'm still learning). but my question for you today is how I would get my error message to shake without reloading the page. My below JS code seems to reload the page when I click submit. The error message style is set to disply:none; by default and only shows when needed.
I hope you understand what I am getting at. ha ha Thank you in advance.
Here's the js code.
function validateLoginForm() {
var x = document.getElementById('email').value;
if (x == null || x == "" || x == "Email") {
document.getElementById('errorWrapper').style.display='block';
document.getElementById('errorText').innerHTML='Please enter your Email address!';
shakeIt();
return false;
}
}
and the jQuery.
$(document).ready(function() {
function shakeIt(){
$('#errorWrapper').effect("shake", { times:5, distance:8 }, 50);
}
});

You need to do it on form.submit ie
$('#loginForm').submit(function(e){
var x= $('#email').val();
if (x==null || x=="" || x=="Email")
{
$('#errorWrapper').show();
$('#errorText').text('Please enter your Email address!');
e.preventDefault();
shakeIt();
}
return true;
});
Returning false will make the page not reload..

Related

javascript redirection doesnt seem to work

I use JavaScript for a simple function, however my redirection doesn't work. I thought it was because of the files, but they seem to be in the same folder. See below file structure:
Here is my relevant code:
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "mr.X" && password == "x123456") {
alert("Login successfully");
window.location = "Dashboard.jsp"; // Redirecting to other page.
return false;
} else {
alert("You have inserted wrong credentials");
}
}

Javascript link will not work without # at the end of the url

I am creating a very simple login site for a school project, and the site is therefore the most basic you can make it.
When the window.location.assing link is activated, it will only work if the current url I am on has a # at the end. E.G. ... project/test.html#.
The rest of the script is perfectly fine. It is only the linking that does not work.
I am working in a local file so I am trying to go from
C:\Users\Tord\Documents\IT\Skryteprosjekt\test.html
to
C:\Users\Tord\Documents\IT\Skryteprosjekt\1.html
I have searched around a lot, but can not find an answer that fits my problem.
The function is being called by an onclick in a button in HTML.
function login() {
var x = document.getElementById("username").value;
if (x == "example") {
var y = document.getElementById("psw").value;
if (y == "example2") {
window.location.assign("1.html");
}
else {
alert("Incorrect username or password. Try again.");
}
}
else if (x == "") {
alert("Please write in a username and password");
}
else {
alert("Incorrect username or password. Try again");
}
}
When I activate the script with the correct username and password, the site just blinks as if it just reloads. Everything else works perfectly.

Javascript function "does not exist". Bad syntax but can't see it

The javascript is supposed to handle form submission. However, even if called with
script src="js/registerform.js"> Uncaught ReferenceError: sendreg is not defined .
The function is called onclick. Can be reproduced on www.r4ge.ro while trying to register as well as live edited. Tried jshint.com but no clue.
I will edit with any snips required.
function sendreg() {
var nameie = $("#fname").val();
var passwordie = $("#fpass").val();
var emailie = $("#fmail").val();
if (nameie == '' || passwordie == '' || emailie == '') {
alert("Please fill all the forms before submitting!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/register.php", {
numeleluii: nameie,
pass: passwordie,
mail: emailie
}, function(data) {
alert(data);
$('#form')[0].reset(); // To reset form fields
setTimeout(fillhome, 1000);
});
}
}
function sendpass() {
var oldpassw = $("#oldpass").val();
var newpassw = $("#newpass").val();
if (oldpassw == '' || newpassw == '') {
alert("Please fill all the forms before submitting!");
} else {
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/security.php", {
xoldpass: oldpassw,
xnewpass: newpassw
}, function(data2) {
alert(data2);
$('#passform')[0].reset(); // To reset form fields
});
}
}
function sendmail()
{
var curpass = $("#curpass").val();
var newmail = $("#newmail").val();
if (curpass == '' || newmail == '')
{
alert("Please fill all the forms before submitting!");
}
else
{
// Returns successful data submission message when the entered information is stored in database.
$.post("http://r4ge.ro/php/security.php", {
curpass: curpass,
newmail: newmail
}, function(data3) {
alert(data3);
$('#mailform')[0].reset(); // To reset form fields
});
}
}
I'm guessing here but... I imagine you are doing something like
...<button onclick="sendreg">...
And you have your <script> in the bottom on the code. Just put them on top or use $("#mybtn").click(sendreg)
Try using $("#mybtn").click(sendreg) instead of inline onclick.
The script wasn't called in the html. sorry for wasting time. A simple
<script src="js/registerform.js"></script> Fixed it.
There is no syntax error there, and I don't see any such error when trying the page.
The error that you get is that you can't make a cross domain call. Do the request to the same domain:
$.post("http://www.r4ge.ro/php/register.php", {
or:
$.post("/php/register.php", {

prevent button form from submission Javascript

This form keeps on submitting even if it executes the return value, what is the problem with my code?
function formhash (form, password)
{
var pass1 = document.getElementById("password").value;
var pass2 = document.getElementById("cpassword").value;
var ok = true;
if (password != cpassword) {
//alert("Passwords Do not match");
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("cpassword").style.borderColor = "#E34234";
ok = false;
return;
}
else
{
$.post('insert_home.php'
{PRIMAID:PRIMAID,EDITCAP:EDITCAP,EDITIMG:EDITIMG,EB_TITLE:EB_TITLE}).done(function(data){
alert ("Book Successfully Updated");
location.reload();
});
var p = document.createElement("input");
form.appendChild(p);
p.name="p";
p.type="hidden";
p.value=hex_sha512(password.value);
password.value="";
form.submit();
}
}
You are calling form.submit();, remove it and it won't submit.
You are using the wrong variable names "password" and cpassword". You created pass1 and pass2 so you need to use those.
Change to this:
//You were using the WRONG variable names
if (pass1 != pass2) {
//alert("Passwords Do not match");
document.getElementById("password").style.borderColor = "#E34234";
document.getElementById("cpassword").style.borderColor = "#E34234";
ok = false;
return false;
}
I don't see where formhash() is used.
The code calls the submit, not the function.
If it submits the form, it' because it's falling in the else condition.
Add lots of "console.log("debug_X")" where "X" is a number different each time.
You have to add inside a console.log the value of pass1 and pass2.
Maybe you are passign a value instead of an object or maybe the reversed situation can happen also.
My instinct tells me to check both password object, and their values.
Also it tells me that you didn't check the content of pass1 and pass2 before posting a comment to Don Rhummy.
Check carefully and please search more before posting your next answer.
You can have the value by doing "console.log(pass1);" and by opening firebug and by checking the javascript console.
Remove Action attribute from Form.

How can I change a form submit action from displaying an alert popup to redirecting to a new page?

I'm trying to troubleshoot something someone else created (never a fun prospect) and want to eliminate an alert popup and have the user redirected to another page after form submission ... I've searched the web and found a couple of possible alternatives, but I also don't want to blow up the page, as I'm not all that experienced in PHP troubleshooting ... this is, I'm guessing, a painfully simple 101-level question, but many thanks in advance ... here's the relevant code:
jQuery("form#commentform input#submit").click(function(event) {
event.preventDefault();
var name = jQuery("form#commentform input#author").val();
if(name=="") {
alert("Name cannot be empty!");
jQuery("form#commentform input#author").focus();
return false;
}
var email = jQuery("form#commentform input#email").val();
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][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
var email_test= pattern.test(email);
if (email == "" || email_test == false) {
alert('Valid email address is required!');
jQuery("form#commentform input#email").focus();
return false;
}
var phone = jQuery("form#commentform input#url").val();
var comment = jQuery("form#commentform textarea#comment").val();
jQuery.get('http://theenergyclub.com/wp-content/themes/EnergyClub/formPost.php', {type:'guestpass', name:name, email:email, phone:phone, comment:comment, rnDnum:Math.random()}, function(data) {
alert('We have received your request. Thank you!');
You can try to replace the last line
alert('We have received your request. Thank you!');
with
window.location = "http://example.com/"
You should be able to just change alert('We have received your request. Thank you!'); to window.location = '<URL>'; where <URL> is the URL you want to re-direct the user to.

Categories

Resources