Solved

Javascript Needed to Validate Field Content

Posted on 2010-11-15
15
645 Views
Last Modified: 2012-05-10
I have a webpage that allows users to enter their name, password and state to access and edit their personal data.  I currently have javascript that prevents them from not making any entry (cannot be empty) but people are circumventing this by putting in a single character or a comma, etc

In other parts of the website, they are required (by perl code) to enter a minimum number of characters to add their data but this does not translate over to the html page the allows them access to the edit form.

What I need is javascript that will validate the number of characters in the fields called Name, State and Password.  These fields are on an html page called Edit.htm

Let me know if you need more details.

Thanks for your help.
0
Comment
Question by:apollo7
  • 6
  • 4
  • 3
15 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34137670
just check the length of the field value, for example

if the name field element id is 'name'
then you check the minimum length by using this function

function hasMinimumLength(id, minLength)
{
   var element = document.getElementById( id );
   if ( element == null )
  {
     return false;
  }
  else
  {
     if ( element.value.length < minLength )
     {
         return false;
     }
     else
     {
         return true;
     }
  }
}
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34137711
then this method can be used wherever you want to validate as per the minimum length
for example if name field has min length of 10 chars, state field has min length of 3 chars, and password field has min length of 10 chars then
if (hasMinimumLength('name', 10) && hasMinimumLength('state', 3) && hasMinimumLength('password', 10) )
{
  //all your fields have required min length
}
0
 
LVL 1

Author Comment

by:apollo7
ID: 34137763
Thanks for the quick response.

Can you add the code needed that would prevent them from entering the form when they click the Edit button?  Right now, an alert pops up saying that "name is required"

What I would like is a popup that states "enter a minimum of 6 characters for name"

Thanks

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34137798
<<Can you add the code needed that would prevent them from entering the form when they click the Edit button?>>
your question description needs me know about your context and your website layout. which form they should not enter? what happens at click of edit button which should not happen? where is your original code where i will have to make this change?
0
 
LVL 1

Author Comment

by:apollo7
ID: 34142440
What should happen when the users clicks the Edit button AND the name, city or password fields contain less than 6 characters is the following:

- search.pl should not run (as shown in the code below)
- the edit form associated with search.pl should not open


<body bgcolor="#FFFFFF">



<SCRIPT LANGUAGE="JavaScript" ID=code>

         function isEmpty(str) {

            // Check whether string is empty.

            for (var intLoop = 0; intLoop < str.length; intLoop++)

               if (" " != str.charAt(intLoop))

                  return false;

            return true;

         }



         function checkRequired(f) {

            var strError = "";

            for (var intLoop = 0; intLoop < f.elements.length; intLoop++)

               if (null!=f.elements[intLoop].getAttribute("required"))

                  if (isEmpty(f.elements[intLoop].value))

                     strError += "  " + f.elements[intLoop].name + "\n";

            if ("" != strError) {

               alert("Required data is missing:\n" + strError);

               return false;

            } else

            return true

         }

</SCRIPT>



<table width=70%><tr bgcolor="#000000"><td><FONT size="+2"><FONT color="#DDDDDD">Edit/Delete Interface</FONT></FONT></td></tr></table><BR>

<FORM ACTION="../cgi-bin/search.pl" METHOD="POST" ONSUBMIT="return checkRequired(this);">



To search/edit/delete, enter your Name and Password.



<P><table><tr valign=top><td>Password:</td><td><input type=password name="checkpassword" required></td></tr>

<tr valign=top><td>Name:</td><td><input type=text name="fullname"></td></tr>

</table><br><input type=hidden name="actiontotake" value="Useredit"><input type=submit value="Edit Your Record"></form>





</p>

Open in new window

0
 
LVL 1

Author Comment

by:apollo7
ID: 34153017
gurvinder372
<<your question description needs me know about your context and your website layout. which form they should not enter? what happens at click of edit button which should not happen? where is your original code where i will have to make this change?>>

I added the code you asked for above, it shows that I want search.pl to not run (if name, password and city have less than 6 characters entered). The form they should not enter is opened when search.pl runs.

The code above only shows name and password fields, city has been added as part of the change requested.

The code above shows a "required" field method - I do not want to retain this, I just need to a popup alert that prevents the user from running search.pl when the Edit button is clicked (and if any of the three fields mentioned contain less than 6 characters).

Thanks and let me know if you more information.
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34173051
Here
<body bgcolor="#FFFFFF">



<SCRIPT LANGUAGE="JavaScript" ID=code>

function isEmpty(str) {

  return str.length==0;

}



function checkRequired(f) {

  var strError = "";

  for (var intLoop = 0; intLoop < f.elements.length; intLoop++) {

    if (null!=f.elements[intLoop].getAttribute("required")) {

      var name = f.elements[intLoop].name;

      var val = f.elements[intLoop].value;

      if (isEmpty(val)) {

        strError += "  " + name + "\n";

      }

      var len = f.elements[intLoop].getAttribute("minlength");

      if (null!=len && val.length < parseInt(len)) {

        strError += "  " + name + " should be minimum "+len+" long\n";

      }

    }

  }

  if ("" != strError) {

    alert("Required data is missing:\n" + strError);

    return false;

  }

  return true;

}

</SCRIPT>



<table width=70%><tr bgcolor="#000000"><td><FONT size="+2"><FONT color="#DDDDDD">Edit/Delete Interface</FONT></FONT></td></tr></table><BR>

<FORM ACTION="../cgi-bin/search.pl" METHOD="POST" ONSUBMIT="return checkRequired(this);">



To search/edit/delete, enter your Name and Password.



<P><table><tr valign=top><td>Password:</td><td><input type=password name="checkpassword" required minlength="6"></td></tr>

<tr valign=top><td>Name:</td><td><input type=text name="fullname" minlength="6" required></td></tr>

</table><br><input type=hidden name="actiontotake" value="Useredit"><input type=submit value="Edit Your Record"></form>





</p>

Open in new window

0
 
LVL 1

Author Comment

by:apollo7
ID: 34179402
Thanks - that worked very well.  Two questions:

1) Can I force the user to enter characters and  numbers only (a - z, 0 - 9)?

2) Is there a way to control the message resturned (do not want to reveal the number of characters needed)?

Thanks very much
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34179420
change
  strError += "  " + name + " should be minimum "+len+" long\n";

to whatever you want

for example
var re = /^[a-zA-Z0-9]{6,}$/;
if (!val.match(re) ) {
        strError += "  " + name + " is not in a valid format\n";
}


however a good password should allow special chars too
0
 
LVL 1

Author Comment

by:apollo7
ID: 34179440
Allowing special characters makes alot of sense, I just want to prevent people from putting in six commas or six apostrophes and getting a returned value - they will not be able to edit but will be able to see infomation they should not see

Is there a way to allows $ or ! but not commas?

Thanks again.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 34179556
yes just add the ! and a $ inside the []
0
 
LVL 1

Author Closing Comment

by:apollo7
ID: 34179568
Thanks very much - excellent help and advice.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34179836
You are welcome
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now