Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Amend The Document On Submit?.

    Hi guys basically,
    currently when a user submits a form and the javascript validation fails, it produces a pop up window informing the user. This code is located within the header and is ran when the user submits the form. How ever i was wondering how i would be able to change the text next to the field to red, or to write something different or adding something this being within the body. How would this be done?

    Thanks

    Tom

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    The short answer is use css and/or innerHTML.

    Here is an example to give you the general idea:-

    Code:
    <style>
    .message {text-align:center;color:red;font-size:10pt; font-weight:bold}
    </style>
    
    <script type="text/javascript"> 
    function changeText() { 
    document.getElementById('message').innerHTML = "You have have not filled in the form correctly!"; 
    } 
    </script> 
    
    <p id = 'message' class = 'message'> </p> 
    
    <input type='button' onclick='changeText()' value = 'Change Text'/>
    The function changeText() will of course be called if and when the form validation fails rather than from a button.

    Without sight of the relevant part of your code and a clearer statement of what you are trying to achieve it is not possible to be more specific.


    Brevior saltare cum deformibus mulieribus est vita - Life is too short to dance with ugly women
    Last edited by Philip M; 07-30-2008 at 05:07 PM. Reason: Typo

  • #3
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers, but still not sure...

    Below is the full code


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Rege Checker</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
    <!--
    
    
    function validateform() {
    
    	isValid = 1;
    	testData = document.sdata.tesData;
    	var reg = /^((((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))|(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))|(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))|(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*))\s(((25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\/(3[0-2]|2[0-9]|1[0-9]|[0-9]))|(\*\.\*\.\*\.\*)))$/;
    
    	
    	if (reg.test(testData.value)) {
    		alert(testData.value + '\n' + " Matches!!! :)");
    	} else {
    		isValid = 0;
    		alert(testData.value + '\n' + " does not match");
    	}
    
    	if (isValid == 1) {
    		return true;
    	}
    	return false;
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
    
    <div id="wrap">
    <form name="sdata" onsubmit="return validateform()" action="http://www.mcfedries.com/scripts/formtest.asp" method="post">
    
    <p><span class="header">Test Data </span></p>
    <table>
    	<tr>
    		<td align="right">
    		tesData
    		</td>
    		<td>
    		<input name="tesData" id="tesData" class="text" type="text" size="60" />
    		</td>
    		<td>
    
    		<span class="help">*</span>
    		</td>
    	</tr>
    
    	<tr>
    		<td align="right">
    		<input type ="submit" value="Sumbit" />
    		</td>
    		<td>
    		<input type="reset" value="Reset" />
    		</td>
    	</tr>
    
    </table>
    </form>
    
    <p class="help">
    Please Note all Fields Are Required*
    </p>
    
    
    </div>
    </body>
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    You do not say what it is you are trying to do. You can simply combine the two functions. You need to edit your code something like:-



    Code:
    function validateform() {
    
    //...........
    
    if (isValid == 1) {
    return true;
    }
    else {
    document.getElementById('message').innerHTML = "You have have not filled in the form correctly!";
    return false; 
    }
    }

    Naturallly you must decide exactly what the changed (revealed) text (message) is and where it should be positioned.
    Last edited by Philip M; 07-30-2008 at 05:22 PM.

  • #5
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just trying to do what you said, but i would want to do it with many fields..

    Ie User.. Enters Incorrect Name, Email.. After Validation.. A Message is next to these fields... Get me?

    So in the above form, when a user submits. if the regex does not match then, to place a message such as "*Field Required" Next too the textbox called testData (yes i have seen its called testdata on there)..
    Last edited by tomehb; 07-30-2008 at 05:31 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,300
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Well, I have shown you how to do it. I think you must make an effort for yourself now.

  • #7
    New Coder
    Join Date
    Jul 2008
    Location
    Peterborough - UK
    Posts
    63
    Thanks
    4
    Thanked 9 Times in 9 Posts
    what about adding an onblur="" to validate each input?

    ie:

    HTML
    Code:
    <input type="text" name="e-mail" onblur="validate()"><Span id="valid_text_1></span>
    JS:
    Code:
    function validate()
    {
      if(valid)
      {
        return false;
      }
      else
      {
        document.getElementById("valid_text_1").innerHTML = "INVALID E_MAIL!!"
      }
    }
    obviously, you'd have to actually define what was valid for each input. But this way, the Javascript will check the validity of the input the moment the user clicks or tabs away from the input.

  • #8
    New to the CF scene
    Join Date
    Dec 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Well, I have shown you how to do it. I think you must make an effort for yourself now.
    Indeed, i was just answering to what i am trying to do question, if that was you.
    Anyway guys thanks for your help.. I do get it. Thankyou '


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •