FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Help with javascript

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Relentless
I have an email form with basic validation (dreamweavers built in validation)

I have this script to validdate everything on the form I want

Code:

function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}


Now that works fine but I also have the need to for the user to confirm there email address
and I use this

Code:

function check(a,b) {
var obja = document.getElementById(a)
var objb = document.getElementById(b)
if (obja.value==objb.value) {}
else {alert("The e-mail fields aren't the same!!")}
}


Now they both work! but if the email adress are not the same ofter the first script has validated everything it still sends. is there a way of stoppong the script from continuing?

I'm not a java geek!

Thanks guys!
Marcuzzo
Code:
function check(a,b) {
var obja = document.getElementById(a) ;
var objb = document.getElementById(b) ;
if (obja.value!=objb.value){
   alert("The e-mail fields aren't the same!!");
   return false;
   }
}



check condition... if not met ... return false... this is basic stuff
BTW...the MM_validateForm function is coded ugly
Relentless
Marcuzzo wrote:
check condition... if not met ... return false... this is basic stuff
BTW...the MM_validateForm function is coded ugly


I didn't code it.

but thanks for your script. see if it works
babarus
i think u shoult put the conditions from script 2 in sript 1 and that will work good.
try that!
Relentless
Sorry this code doesn't work
Code:
function check(a,b) {
var obja = document.getElementById(a) ;
var objb = document.getElementById(b) ;
if (obja.value!=objb.value){
   alert("The e-mail fields aren't the same!!");
   return false;
   }
}


it still sends the email!
When the values are not the same.
Marcuzzo
you are not calling that function and fyi you wrote that function, I just tweaked it.
please post the entire thing and not just a fragment
rickylau
Functions starting with "MM_" should be written by Dreamweaver, and they are just a mess and not too easy to modify, although it is quite practical sometimes, I would rather write all the code by myself.

As what Marcuzzo mentioned, you may need to post how these function are called.

Or i would prefer this way:
When one of the email fields is changed, check if they are consistent and disable submit button if not.

This is how the code will look like
Code:

----Javascript-----
var submitButton = "submitForm";
// Assuming the id attribute of form submission button is "submitForm"
var emailField1 = "emailAddress";
// Assuming the id attribute of one of email field is "emailAddress"
var emailField2 = "emailConfirm";
// Assuming the id attribute of another email field is "emailConfirm"

// In replace of function check (a, b)
function checkEMailConsistency () {
  document.getElementById (submitButton).disabled = document.getElementById (emailField1).value != document.getElementById (emailField2).value;
  // If emailField1's value is not emailField2's value, then submitButton's disabled attribute set to true
}


-----HTML-----
<!-- Irrelevent attributes are omitted -->
<!-- For assurance, blur, change and keydown will fire check function, but using onchange only seems okay -->
<input id="emailAddress" name="email" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency (); onkeydown="checkEMailConsistency ();" type="text" /><!-- emailField1 -->
<input id="emailConfirm" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency (); onkeydown="checkEMailConsistency ();" type="text" /><!-- emailField2 -->
<input id="submitForm" type="submit" /><!-- submitButton -->
Relentless
Thank you rickylau your script. works perfectly

but anychance of making it with a pop up message?

like so that when you type in the confirmed_email filed and focus off the box a window pops up and when the user clicks ok it auto deletes the confirmed_email field and leaves the email field with the exsisting email addy?

so that the user is not stuck in a loop

and here is my HTML
Code:
<input name="Email" class="CFW_emailbox CFW_box_border" id="Email" value="" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency ();" onkeydown="checkEMailConsistency ();" type="text" /></td>
        </tr>
        <tr class="style4">
          <td height="30" align="right" valign="middle" class="style4">Confirm Email:</td>
          <td height="30" valign="middle" class="style4">&nbsp;</td>
          <td height="30" colspan="2" align="left" valign="middle">
        <input id="Confirm_Email" name="Confirm_Email" type="text" class="CFW_emailbox CFW_box_border" value="" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency ();" onkeydown="checkEMailConsistency ();" /></td>
rickylau
Some code are changed
Code:

//----Javascript-----
//Changes
//emailError was added to alert user
var submitButton = document.getElementById ("submitForm"); // ID of submit button
var emailField1 = document.getElementById ("emailAddress"); // ID of email address
var emailField2 = document.getElementById ("emailConfirm"); // ID of confirm email
var emailError = document.getElementById ("emailError"); // ID of <span> showing error

function checkEMailConsistency () {
  var consistent = emailField1.value == emailField2.value;
  submitButton.disabled = !consistent;
  // If emailField1's value is not emailField2's value, then submitButton's disabled attribute set to true
  emailError.innerHTML = consistent?"":"Two email fields are not consistent!";
  // Show the error if not consistent or nothing if consistent, change the message whatever you want.
}

<!----HTML----->
<!-- Irrelevent attributes are omitted -->
<!-- For assurance, blur, change and keyup will fire check function, but using onchange only seems okay -->
<!-- Changes -->
<!-- keydown was changed to keyup as keyup will fire after value is changed -->
<!-- emailError is added to alert user -->
<input id="emailAddress" name="email" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency (); onkeyup="checkEMailConsistency ();" type="text" /><!-- emailField1 -->
<input id="emailConfirm" onblur="checkEMailConsistency ();" onchange="checkEMailConsistency (); onkeyup="checkEMailConsistency ();" type="text" /><!-- emailField2 -->
<span id="emailError"></span><!-- emailError -->
<input id="submitForm" type="submit" /><!-- submitButton -->


  • Changes detail can be seen from comments of above code
  • Altering text in a text container (span / div / table data etc) is prefer then popping up message, as the function will be fired when user is typing email address, if you would like to do so, you may either

    • Stop firing check function from keyup by deleting
      Code:
      onkeyup="checkEMailConsistency ();"
      Or
    • Add a function in JavaScript (maybe right after checkEMailConsistency function)
      Code:
      function alertError () {
        if (emailField1.value == "" || emailField2.value == "") { return; }
        // Skip if one of the email field is empty, maybe user is going to fill another field at that moment
        if (emailField1.value != emailField2.value) { alet ("Email fields are not consistent!"); }
        // Change above message whatever you want
      }
      Then call it in onblur, like
      Code:
      onblur="checkEMailConsistency (); alertError ();"
      Therefore user is alerted if their inputted email are not consistent, only after the email field are blurred

  • Clearing user input is not encouraged in my opinion, because you cannot know which field is incorrect: the user can input wrong email address in first field, or the second field, and correct email address are inputted in another one. Also, as submit button will be disabled when two email field is incosistent, user must unavoidably find and correct the input to submit the form, therefore clearing the fields is quite meaningless. However if you really want to do so, simply add
    Code:
    emailField2.value="";
    In the script. The ideal position should be right after poping up message, like
    Code:
    function alertError () {
      if (emailField1.value == "" || emailField2.value == "") { return; }
      if (emailField1.value != emailField2.value) {
        alet ("Email fields are not consistent!");
        emailField2.value="";
      }
    }

Marcuzzo
Code:
<html>
<head>
<title></title>
<script type="text/javascript">
function checkEMailConsistency () {
 var a = document.getElementById ("emailAddress").value;
 var b = document.getElementById ("emailConfirm").value;
 var ctrl = document.getElementById ("submitForm");
 var mail_regExp = new RegExp(/[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/);
 if ( ( a != b ) || ( a == "" ) || ( b == "" ) ) {
   ctrl.disabled = true;
   ctrl.value = "Email addresses don't match";   
   return ;
  }
 if ( !  mail_regExp.test(a) ) return ; // not a valid email address
 ctrl.disabled = false;
 ctrl.value = "submit"; 
}
</script>
</head>
<body>
<input id="emailAddress" name="email" onkeyup="checkEMailConsistency ();" type="text" /><!-- emailField1 -->
<input id="emailConfirm" onkeyup="checkEMailConsistency ();"type="text" /><!-- emailField2 -->
<input id="submitForm" type="submit" disabled /><!-- submitButton -->
</body>
</html>



personally I would check the email address when the form is beeing submitted.
Related topics

Need Help: Javascript stoped until all pages loaded.
Off-Screen Objects Javascript
Table Help / Javascript dopdown menu
Thumbnails Linked to jpgs in the Same window. JS or Html?
Javascript Gallery Help (get some FRIH$)
I could really use some help with Javascript...
Help needed with Javascript and overflow
JavaScript Help
#Paying 30 + frih$ to fix my javascript! Help! Fast!#
HELP with Javascript!
Help with Javascript Aquarium
Help please - menu delay (JavaScript)
Help with javascript!!
A little Help (Html,CSS, javascript)
Javascript help
help needed with css & javascript
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.