That is already done in the onsubmit event.
then what does the validate() function contains actually…
Here is the contents of that function, which is pretty much copy/pasted from your recently posted listing:
function validate() {
hasFocus = false;
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++) {
if (!ary[z0](form)) {
rtn=false;
}
}
return rtn;
}
then i need to save it as messagesnew.js right
The entire script from your first post, right.
first post i have saved as messagesnew.js means which contain all the functions
now where to paste
the below code
function validate() {
hasFocus = false;
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++) {
if (!ary[z0](form)) {
rtn=false;
}
}
return rtn;
}
Don’t. It’s already there.
then why my script is not executing…
whats the problem…what will be my total script…
then the script i sent u before was as same as the script you told …
that too not executing…
what i need to change then…
Aha, that is the right question to ask.
If the script has a problem, such as an expected HTML element not being there, thr script will fail and stop executing. It will not return false to prevent the form from submitting, which means that the onsubmit event will continue on and submit, even though there was a problem.
The problem that I see occurring, is that the script is attempting to access a field named “password2”. The currently has a field with the name “repassword”, so you should update the form so that it meets up with the requirements of the script.
you are telling me to update “repassword” to “password2” in html script right…
will that solve…
Yes, that will solve the problem.
Your jsFiddle has config issues also getting in your way.
You need also to:
- Change onLoad to no wrap (body preferably)
- Change MooTools to No library
then my messagesnew.js will be the below code …is that so…
// form validation function //
function validate() {
hasFocus = false;
var form = document.forms['form'];
var ary=[checkName,checkEmail,validatePwd,validPhone];
var rtn=true;
var z0=0;
for (var z0=0;z0<ary.length;z0++) {
if (!ary[z0](form)) {
rtn=false;
}
}
return rtn;
}
function checkName(form)
{
var eobj = document.getElementById('realnameerror');
var sRealName = form.realname.value;
var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
var error = false;
eobj.innerHTML = '';
if (sRealName == '')
{
error = 'Error: Username cannot be blank!';
}
else if (sRealName.length < 4)
{
error = "UserName should be atleast 4 characters long";
}
else if (!oRE.test(sRealName))
{
error = "Incorrect format.";
}
if (error)
{
if (hasFocus == false)
{
form.realname.focus();
hasFocus = true;
}
eobj.innerHTML = error;
return false;
}
return true;
}
function checkEmail(form) /* for email validation */
{
var eobj = document.getElementById('emailerror');
eobj.innerHTML = '';
var error = false;
if(form.email.value.length == 0)
{
error = 'Please enter email.';
} else if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
{
return true;
} else
{
error = 'Invalid E-mail Address! Please re-enter.';
}
if (error)
{
eobj.innerHTML = error;
if (!hasFocus)
{
form.email.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validatePwd(form) /* password & retype-password verification */
{
var eobj1 = document.getElementById('passworderror');
var eobj2 = document.getElementById('password2error');
var minLength = 6;
var invalid = ' ';
var pw1 = form.password.value;
var pw2 = form.password2.value;
var error = false;
eobj1.innerHTML = '';
eobj2.innerHTML = '';
if (pw1.length < 1)
{
error = 'Please enter your password.';
}
else if (pw1.length < minLength)
{
error = 'Your password must be at least ' + minLength + ' characters long. Try again.';
}
else if (pw1.indexOf(invalid) > -1)
{
error = 'Sorry, spaces are not allowed.';
}
else if (pw2.length == 0)
{
error = 'Please retype password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
eobj2.innerHTML = error;
return false;
}
if (error)
{
if (!hasFocus)
{
form.password.focus();
hasFocus = true;
}
eobj1.innerHTML = error;
return false;
}
if (pw1 != pw2)
{
eobj2.innerHTML = ' passwords not matching.Please re-enter your password.';
if (!hasFocus)
{
form.password2.focus();
hasFocus = true;
}
return false;
}
return true;
}
function validPhone(form) /* phone no validation */
{
var eobj = document.getElementById('phonenoerror');
var valid = '0123456789';
var phone = form.phoneno.value;
var error = false;
var i = 0;
var temp;
eobj.innerHTML = '';
if (phone == '')
{
error = 'This field is required. Please enter phone number';
}
else if (!phone.length > 1 || phone.length < 10)
{
error = 'Invalid phone number length! Please try again.';
}
else
{
for (i = 0; i < phone.length; i++)
{
temp = '' + phone.substring(i, i + 1);
if (valid.indexOf(temp) == -1)
{
error = 'Invalid characters in your phone. Please try again.';
}
}
}
if (error)
{
if (!hasFocus)
{
form.phoneno.focus();
hasFocus = true;
}
eobj.innerHTML = error;
return false;
}
return true;
}
// START OF MESSAGE SCRIPT //
var MSGTIMER = 20;
var MSGSPEED = 5;
var MSGOFFSET = 3;
var MSGHIDE = 3;
// build out the divs, set attributes and call the fade function //
function inlineMsg(target,string,autohide) {
var msg;
var msgcontent;
if(!document.getElementById('msg')) {
msg = document.createElement('div');
msg.id = 'msg';
msgcontent = document.createElement('div');
msgcontent.id = 'msgcontent';
document.body.appendChild(msg);
msg.appendChild(msgcontent);
msg.style.filter = 'alpha(opacity=0)';
msg.style.opacity = 0;
msg.alpha = 0;
} else {
msg = document.getElementById('msg');
msgcontent = document.getElementById('msgcontent');
}
msgcontent.innerHTML = string;
msg.style.display = 'block';
var msgheight = msg.offsetHeight;
var targetdiv = document.getElementById(target);
targetdiv.focus();
var targetheight = targetdiv.offsetHeight;
var targetwidth = targetdiv.offsetWidth;
var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2);
var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET;
msg.style.top = topposition + 'px';
msg.style.left = leftposition + 'px';
clearInterval(msg.timer);
msg.timer = setInterval("fadeMsg(1)", MSGTIMER);
if(!autohide) {
autohide = MSGHIDE;
}
window.setTimeout("hideMsg()", (autohide * 1000));
}
// hide the form alert //
function hideMsg(msg) {
var msg = document.getElementById('msg');
if(!msg.timer) {
msg.timer = setInterval("fadeMsg(0)", MSGTIMER);
}
}
// face the message box //
function fadeMsg(flag) {
if(flag == null) {
flag = 1;
}
var msg = document.getElementById('msg');
var value;
if(flag == 1) {
value = msg.alpha + MSGSPEED;
} else {
value = msg.alpha - MSGSPEED;
}
msg.alpha = value;
msg.style.opacity = (value / 100);
msg.style.filter = 'alpha(opacity=' + value + ')';
if(value >= 99) {
clearInterval(msg.timer);
msg.timer = null;
} else if(value <= 1) {
msg.style.display = "none";
clearInterval(msg.timer);
}
}
// calculate the position of the element in relation to the left of the browser //
function leftPosition(target) {
var left = 0;
if(target.offsetParent) {
while(1) {
left += target.offsetLeft;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.x) {
left += target.x;
}
return left;
}
// calculate the position of the element in relation to the top of the browser window //
function topPosition(target) {
var top = 0;
if(target.offsetParent) {
while(1) {
top += target.offsetTop;
if(!target.offsetParent) {
break;
}
target = target.offsetParent;
}
} else if(target.y) {
top += target.y;
}
return top;
}
// preload the arrow //
if(document.images) {
arrow = new Image(7,80);
arrow.src = "images/msg_arrow.gif";
}
}
No it will not. The JavaScript code should not change at all from that which is in your first post to this thread.
It is the HTML code for the form that should be updated, to bring it in line with what is expected by the script.
i have updated by changing “repassword” to “password2” in my login.html…
but also not executing…
i have shown in my jsfiddle…as below
http://jsfiddle.net/ravi951/NfjwK/7/
but also not executing…
The JavaScript used in that fiddle is still not the script that you used in your first post.
As soon as you use the JavaScript from your first post, it will work good and properly.
yes it is executing but in out the login form fields are not in correct order.
“retype password” field must be in single line and all the colons must be one below the another…
how to display that…
below is my updated fiddle
http://jsfiddle.net/ravi951/NjW9Q/4/
u can check output there…
“but in out” ???
Can you please explain further?
You should be able to adjust CSS width of the wrapper, from a width of 600 to a width of 700 instead.
Pardon? Colons, like these?
:
:
:
:
What do you mean?
like in many login forms…
username :textbox
email id : textbox
password : textbox
retype password : textbox
phone no : textbox
in my original form page my field retype password field is not in a single line…
and alll fields should be like above given shown …
do u mean like this…
<label for=“name”>User Name</label>:
<input type=“text” name=“realname” id=“name” />
<span id=“realnameerror”></span>
no it is not working…
also my password field is displaying what i gave…it is not hiding the contents
also phone no field should be restricted to 10 digits but it is acceoting any no of digits…
what is wrong…