SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy js form validation problems

    Hello good pple of the forum i created a javascript to validate a form that will check that whether the text boxes are empty or not, the script is thus:
    <script>
    function sendform(){
    if (document.form1.textfield1.value=="")
    {alert("the firstname cannot be empty");}
    if (document.form2.textfield2.value=="");
    {alert("the lastname field cannot be empty);}
    }
    </script>
    <body>
    Afterwards, using the onClick keyword in a submit button, i instructed the browser to check whether the fields are empty. If the firstname field is empty the alert msg is displayed and the same goes for the last name field, but if one out the lastname and firstname(vice versa) is not empty, after the alert msg is displayed and i click on the "ok" button on the alert box it clears away my previously entered data on a field that isn't empty, pls is there anything code that can i use so that when a particular field isn't empty, after i 've clicked on the "ok" button on the alert box it doesn't clear off a field that isn't empty?

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skip the onlick on the submit button, try something like this instead:
    Code:
    <script type="text/javascript">
    function sendForm(form)
    {
    	if(!form.textfield1.value)
    	{
    		alert("the firstname cannot be empty");
    		return false;
    	}
    
    	if(!form.textfield2.value)
    	{
    		alert("the lastname field cannot be empty");
    		return false;
    	}
    
    	return true;
    }
    </script>
    
    <form onsubmit="return sendForm(this);">
    Last edited by Pepejeria; Feb 12, 2005 at 09:39.

  3. #3
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    still doesn't work

    Hello there thanks a million for taking to provide a near solution to my problem,but still i ve something that baffles me when i click on the submit button. Now from the code u gave me thus:
    <script type="text/javascript">
    function sendForm(form)
    {
    if(!form.textfield1.value)
    {
    alert("the firstname cannot be empty");
    return false;
    }

    if(!form.textfield2.value)
    {
    alert("the lastname field cannot be empty);
    return false;
    }

    return true;
    }
    </script>

    <form onsubmit="return sendForm(this);">
    whenever i type a text in the textfield1 field and ignore typing anything in the textfield2 field, the alert box displays a msg that the"firstname field cannot be left empty" n not the textfield2 field, afterwhich i click on the ok button on the alert box, this time though the previous value in the textfield2 is left and not erase by the function and vice versa.In order if i type a value in the textfield2 field and ignore typing anything in the textfield1, the alert box will pop up with the msg "the lastname field cannot be left empty" afterwards, i click on the ok button and previous msg is still there. Pls what can i simply do to correct these wrong msg that the alert box is sending?

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function sendForm(form)
    {
    	if(!form.textfield1.value)
    	{
    		alert("the firstname cannot be empty");
    		form.textfield1.focus();
    		return false;
    	}
    
    	if(!form.textfield2.value)
    	{
    		alert("the lastname field cannot be empty");
    		form.textfield2.focus();
    		return false;
    	}
    
    	return true;
    }
    </script>
    
    <form onsubmit="return sendForm(this);">
    	<input type="text" name="textfield1">
    	<input type="text" name="textfield2">
    	<input type="submit">
    </form>
    This works as expected for me, maybe it didnt work before because there was a typo in the script.

  5. #5
    SitePoint Addict ghostme's Avatar
    Join Date
    Feb 2005
    Posts
    371
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot i tried the new code and it worked perfectly . Now what i want to do is to insert comments all by myself n pls u should check whether my comments r right or not. This obviously would enable to get a better understanding of the code and ofcourse javascriptscript type="text/javascript">
    function sendForm(form)//this declares the function with a parameter
    {
    if(!form.textfield1.value)//the form name(form) it declares the condition and i still can't figure why the exclamation was included
    {
    alert("the firstname cannot be empty");//alert box msg
    form.textfield1.focus();//the parameter is at work here and i find it difficult to understand the focus method, i know about onfocus keyword
    return false;//if the above is true when the user click on the submit button, the form will not be processed
    }

    if(!form.textfield2.value)
    {
    alert("the lastname field cannot be empty");
    form.textfield2.focus();
    return false;
    // same as above}

    return true;//if the above two if condition ain't valid then the form should be processed
    }
    </script>

    <form onsubmit="return sendForm(this);">//when the user clicks the submit button, this statement would return the values that has been passed to the calling function, also the "this" in the paranthesis could "form" or anyword(so i think)
    Pls, find time to look at this comments and tell me where i goofed.
    Thanks alot for your help.
    <input type="text" name="textfield1">
    <input type="text" name="textfield2">
    <input type="submit">
    </form>


Bookmarks

Posting Permissions

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