Need Help in Javascript : The Official Microsoft ASP.NET Forums

Reply

saba.amir86

Member

1 Points

13 Posts

Need Help in Javascript

Jan 03, 2013 12:41 AM|LINK

Hello,

here is the code, im new to javascript and m not able to write a appropirate code for Name Field as it have to show alphabets there and if typed number and submit the form it must give error that Name must have alphabets characters only.and i am not able to write an email field that recongnize the @ and "." symbols and gives the invalid email alert if typed wrong. and the third problem is with gender validation. the user must select one, male or female.

_______________________________________________________________________________________________________________________________________________

<html>
<head>
<title>Registration Form</title>

{

if ( document.getElementById("userid").value=="")
{
alert( "User id should not be empty");
return false;
}
if (document.getElementById("pass").value=="")
{
alert("password should not be empty");
return false;
}
if(document.getElementById("list").value== "(Please choose a country)")
{
alert("Select your country from the list");
return false;
}
if(document.getElementById("name").value=="text")
{
alert (" Name must have alphabet character only");
return false;
}
for (var i=0;i< docuemnt.myForm.optGender.length;i++)
{

if(document.myForm.optGender[i].checked)
productselect=true;
}
if(!productselect)
{
alert("Please select a gender" );
return false;
}
}
</script>
</head>

User ID : <br> <input type="text" id="userid"name="userid"><br>
Password: <br> <input type="password" id="pass"name="pass"><br>
Name:</br><input type="text" id="alphabet" name="alphabet" size="50"></br>
Country: <br>
<SELECT name= "County list" id="list"size="multiple" >

<OPTION value= "(Please choose a country)" selected> (Please choose a country) </option>
<OPTION value= "Saudi Arabia" > Saudi Arabia </option>
<OPTION value= "Pakistan"> Pakistan </option>
<OPTION value= "Oman" > Oman </option>
<OPTION value= "U.A.E"> U.A.E </option>
<OPTION value= "Bahrain"> Bahrain </option>

</SELECT>
</br>
Email: </br><input type="text" name="email" size="50"/> </br>
Gender: <br>
<input type="radio" name="optGender" value="1" >Male </br>
<input type="radio" name="optGender" value="2" >Female </br>
</br>
<input type="submit" name="submit" value="Submit">

</form>
</form>

Marked as answer by saba.amir86 on Jan 05, 2013 05:23 AM

Reply

kedarrkulkar...

All-Star

34535 Points

5554 Posts

Re: Need Help in Javascript

Jan 03, 2013 03:38 AM|LINK

try with these changes

<html>
<head>
<title>Registration Form</title>

<script type="text/javascript">
function validateForm()
{
var productselect=false;
if ( document.getElementById("userid").value=="")
{
alert( "User id should not be empty");
return false;
}
if (document.getElementById("pass").value=="")
{
alert("password should not be empty");
return false;
}
if(document.getElementById("list").value== "(Please choose a country)")
{
alert("Select your country from the list");
return false;
}
if(document.getElementById("alphabet").value.match(/\d+/g)!=null)
{
alert (" Name must have alphabet character only");
return false;
}
if(document.getElementById("email").value!='' && !validateEmail(document.getElementById("email").value))
{
alert ("Invalid email format");
return false;
}
for (var i=0;i< myForm.optGender.length;i++)
{

if(myForm.optGender[i].checked)
productselect=true;
}
if(!productselect)
{
alert("Please select a gender" );
return false;
}
return true;
}

function validateEmail(inputvalue){
    var pattern=/^([a-zA-Z0-9_.-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
    if(pattern.test(inputvalue)){
		return true;
    }else{
		return false;
    }
}

</script>
</head>

<body>
<form name="myForm" action="" method="get">

User ID : <br> <input type="text" id="userid" name="userid"><br>
Password: <br> <input type="password" id="pass" name="pass"><br>
Name:</br><input type="text" id="alphabet" name="alphabet" size="50"></br>
Country: <br>
<SELECT name= "County list" id="list"size="multiple" >

<OPTION value= "(Please choose a country)" selected> (Please choose a country) </option>
<OPTION value= "Saudi Arabia" > Saudi Arabia </option>
<OPTION value= "Pakistan"> Pakistan </option>
<OPTION value= "Oman" > Oman </option>
<OPTION value= "U.A.E"> U.A.E </option>
<OPTION value= "Bahrain"> Bahrain </option>

</SELECT>
</br>
Email: </br><input type="text" id="email" name="email" size="50"/> </br>
Gender: <br>
<input type="radio" name="optGender" group="optGender" value="1" >Male </br>
<input type="radio" name="optGender" group="optGender" value="2" >Female </br>
</br>
<input type="submit" name="submit" value="Submit" onclick="return validateForm()">

<input type="reset" value="Reset">

</form>


<body>
</HTML>

hope this helps...

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Reply

heyitsme

Participant

1133 Points

409 Posts

Re: Need Help in Javascript

Jan 03, 2013 03:38 AM|LINK

hi, just use the below code

<html>
<head>
    <title>Registration Form</title>

    <script type="text/javascript">
        function validateForm() {

            if (document.getElementById("userid").value == "") {
                alert("User id should not be empty");
                return false;
            }


            var uname = document.getElementById("userid").value;
            var filter = /^[a-z|A-Z]+$/;
            if (!filter.test(uname)) {
                alert("Use only alphabets for username");
                document.getElementById("userid").value = "";
                document.getElementById("userid").focus();
                return false;
            }



            if (document.getElementById("pass").value == "") {
                alert("password should not be empty");
                return false;
            }
            if (document.getElementById("list").value == "(Please choose a country)") {
                alert("Select your country from the list");
                return false;
            }


            var email = document.getElementById("email").value;
            var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (!filter.test(email)) {
                alert("Invalid email");
                document.getElementById("email").value = "";
                document.getElementById("email").focus();
                return false;
            }

            var radios = document.getElementsByName("rgen");
            var formValid = false;

            var i = 0;
            while (!formValid && i < radios.length) {
                if (radios[i].checked) formValid = true;
                i++;
            }

            if (!formValid) alert("Must select gender");
            return formValid;
        }
    </script>

</head>
<body>
    <form name="myForm" action="" onsubmit="return validateForm()" method="get">
    User ID :
    <br>
        <input type="text" id="userid" name="userid"><br>Password:
            <br>
                <input type="password" id="pass" name="pass"><br>Name:</br>
                <input type="text" id="alphabet" name="alphabet" size="50"></br>
            Country:
            <br>
                <select name="County list" id="list" size="multiple">
                    <option value="(Please choose a country)" selected>(Please choose a country) </option>
                    <option value="Saudi Arabia">Saudi Arabia </option>
                    <option value="Pakistan">Pakistan </option>
                    <option value="Oman">Oman </option>
                    <option value="U.A.E">U.A.E </option>
                    <option value="Bahrain">Bahrain </option>
                </select>
            </br>
            Email: </br>
        <input type="text" name="email" id="email" size="50" />
    </br>
    Gender:
    <br>
        <input type="radio" id="1" name="rgen" value="1" />Male </br>
    <input type="radio" id="Radio1" name="rgen" value="2" />Female </br> </br>
    <input type="submit" name="submit" value="Submit">
    <input type="reset" value="Reset">
    </form>
    </form>
</body>
</html>

Mark this post as answer if it helps you!!!

Regards
Sangamesh Belawatgi,
Software Developer,
Bangalore - INDIA

Reply

saba.amir86

Member

1 Points

13 Posts

Re: Need Help in Javascript

Jan 03, 2013 08:48 AM|LINK

Thanks alot..it really helped me.. now how can i add in User id and password length should be between 5 to 12

Reply

saba.amir86

Member

1 Points

13 Posts

Re: Need Help in Javascript

Jan 03, 2013 08:52 AM|LINK

Thanks alot..it really helped me.. now how can i restrict the length of User id and password length should be between 5 to 12

Reply

roopeshreddy

All-Star

20155 Points

3328 Posts

Re: Need Help in Javascript

Jan 03, 2013 09:17 AM|LINK

Hi,

Add the following condition -

var len =  new String(document.getElementById("userid").value).length;
if (len < 5 || len > 12) {
                alert("User id should be of 5 - 12 characters");
                return false;
            }

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Reply

saba.amir86

Member

1 Points

13 Posts

Re: Need Help in Javascript

Jan 03, 2013 09:42 AM|LINK

ok thanks alot. it worked well.. now how to give submit alert that form is submitted when every value is true..

Reply

kedarrkulkar...

All-Star

34535 Points

5554 Posts

Re: Need Help in Javascript

Jan 03, 2013 11:16 AM|LINK

saba.amir86

ok thanks alot. it worked well.. now how to give submit alert that form is submitted when every value is true..

follow these steps...

add hidden texbox on page like this... before </form> tag

<input type="hidden" id="status" />

call a javascript function on body onload...

at the end of validateForm() function, set success status in hiddendfield

function validateForm
{
...
....
document.getElementById("status").value = 'success';
}

then, create new function CheckStatus() inside javascript tags

function CheckStatus()
{
if(document.getElementById("status").value == 'success')
{
alert('Data was posted successfully');
document.getElementById("status").value = '';
}
}

hope this helps...

Cheers!
KK

Please mark as Answer if post helps in resolving your issue
My Site

Reply

roopeshreddy

All-Star

20155 Points

3328 Posts

Re: Need Help in Javascript

Jan 03, 2013 01:40 PM|LINK

Hi,

At the end of the Javascript client side validation code, put an alert!

function ValidationFunc()
{
  //Your logic, if fails return false;
  //...
  //...
  //...


   alert("Form Submitted!");
   return true;
}

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

Reply

saba.amir86

Member

1 Points

13 Posts

Re: Need Help in Javascript

Jan 03, 2013 02:09 PM|LINK

can u please write it in my html code.

Thanks

Need Help in Javascript RSS

16 replies

saba.amir86

Need Help in Javascript

kedarrkulkar...

Re: Need Help in Javascript

heyitsme

Re: Need Help in Javascript

saba.amir86

Re: Need Help in Javascript

saba.amir86

Re: Need Help in Javascript

roopeshreddy

Re: Need Help in Javascript

saba.amir86

Re: Need Help in Javascript

kedarrkulkar...

Re: Need Help in Javascript

saba.amir86

roopeshreddy

Re: Need Help in Javascript

saba.amir86

Re: Need Help in Javascript

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft