Problem in form validation with JavaScript

Question

The editvalidate() function is not getting called at all:

Please suggest why. What's the remedy?

<script type="text/javascript">

 function editvalidate() {
  var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
  var numericExpression = /^[0-9]+$/;


    if(document.editprofile.userid.value == '' || document.editprofile.password.value == ''||document.editprofile.name.value == ''||document.editprofile.age.value == ''||document.editprofile.collegeid.value == ''||document.editprofile.mobile.value == ''||document.editprofile.address.value == ''||document.editprofile.department.value == ''||document.editprofile.email.value == ''||document.editprofile.sec_ques.value == ''||document.editprofile.answer.value == ''){
      alert("Hey! you can't left a field blank!");
      return false;
     }
     else if(!document.editprofile.email.value.match(emailExp)){
     alert("You need to enter a valid email address to get proper notifications!");
      return false;

     }  else if(!document.editprofile.mobile.value.match(numericExpression)){
     alert("Mobile numbers are all numeric digits i think!");
      return false;

     } else if(document.editprofile.mobile.value.length < 10){
     alert("Mobile number must be 10 digit long!");
      return false;

     }


     else{
      return true;
     }

 }






</script>

the form is given below and its used to fetch data from database and itself getfilled with the values.the editable entries are corrected and the form is submitted.its working fine just not getting validated cz the editvalidate() is not getting called at all.why?

<form name="editprofile" action="editprofile.jsp" method="post" onsubmit="return editvalidate();">

<table align="center">
 <%
  for(int i = 0; i < list.length ; i++){
 %>
 <tr>
  <td>Name:</td>
  <td><input type="text" name="name" size="35" style="width: 219px" value="<%=list[i].getName() %>" maxlength="25"></td>
 </tr>
 <input type="hidden" name="userid" size="20" style="width: 220px"
  value="<%=list[i].getUserid() %>" maxlength="10">
 <tr>
  <td>Address:</td>
  <td><input type="text" name="address" size="46"
   style="width: 221px" value="<%=list[i].getAddress() %>"
   maxlength="50"></td>
 </tr>
 <tr>
  <td>E-mail:</td>
  <td><input type="text" name="email" size="20"
   style="width: 220px" value="<%=list[i].getEmail() %>" maxlength="40"></td>
 </tr>
 <tr>
  <td>Age:</td>
  <td><input type="text" name="age" size="20" style="width: 219px"
   value="<%=list[i].getAge() %>" maxlength="2"></td>
 </tr>
 <tr>
  <td>College ID:</td>
  <td><input type="text" name="collegeid" size="20"
   style="width: 219px" value="<%=list[i].getCollegeid() %>"
   maxlength="10"></td>
 </tr>
 <tr>
  <td>Mobile:</td>
  <td><input type="text" name="mobile" size="20"
   style="width: 218px" value="<%=list[i].getMobile() %>" maxlength="10"></td>
 </tr>
 <tr>
  <td>Department:</td>
  <td><input type="text" name="department" size="20"
   style="width: 218px" value="<%=list[i].getDepartment() %>"
   maxlength="10"></td>
 </tr>
 <tr>
  <td>Security Question:</td>
  <td><input type="text" name="sec_ques" size="20"
   style="width: 218px" value="<%=list[i].getSec_ques() %>"
   maxlength="50"></td>
 </tr>
 <tr>
  <td>Answer:</td>
  <td><input type="text" name="answer" size="20"
   style="width: 218px" value="<%=list[i].getAnswer() %>" maxlength="50"></td>
 </tr>

 <tr>
  <td><input type="submit" name="operation" value="editprofile"
   style="width: 118px"></td>
  <td><input type="reset" value="Reset" name="B2"></td>
 </tr>

 <%
  }
%>

i checked it the way u suggested and found that the function is getting called.but why the rest alerts r nt visible? isnt thatdue to the value attribute in input tags

Answer 1

you don't call it anywhere from your html, you should probably call it <form onsubmit="return editvalidate();">

Ok now I see he formatted it properly, I don't mind the down votes I give them sometimes as well.

@Robin Agrahari

you probably have somewhere typo in the javascript no one is going to go trought it but you, try to test one by one if by using alert as you do. But don't do it on sumbit, create a mock button that will call(on click) this function editvalidate(); and check your function thoroughly and you will get to the problem eventually

Answer 2

With the as far given little information, all I can answer is: Just run a Javascript debugger. I can recommend you Firebug for this.

That said, in the future please come up with an SSCCE instead of cutouts of code with unnecessary clutter. This avoids crawling long in the code searching for lines of relevance and at first glance obvious questions as "Are they in the same file?", "Did you add alert('blah') as 1st line of function to see if it actually is invoked?", "Did the browser have JS enables?", "Are you sure that you didn't typo'ed the function name?", "Isn't there more into the code which may have disturbed it?", etcetera.

Here's a basic example of such an SSCCE:

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2063598</title>
        <script>
            function validate(form) {
                alert('Validate method invoked!');
                return false;
            }
        </script>
    </head>
    <body>
        <form onsubmit="return validate(this)">
            <input type="text" name="foo" class="required">
            <input type="submit">
        </form>
    </body>
</html>

That said, I see that you're still using the legacy scriptlets in your JSP. If you can, I strongly recommend to stop using it and switch to taglibs/EL before it's too late. Raw Java code belongs in Java classes, not in JSP files.

Basic example with JSTL's (just drop jstl-1.2.jar in /WEB-INF) c:forEach:

<table>
    <c:forEach items="${users}" var="user">
        <tr>
            <td><input type="text" name="address" value="${user.address}"></td>
            <td><input type="text" name="email" value="${user.email}"></td>
            <td><input type="text" name="college" value="${user.college}"></td>
        </tr>
    </c:forEach>
</table>

And also keep CSS in its own CSS file to separate style from content and to increase webapp performance and maintainability.

Answer 3

How can you tell it's not being called? I'd put an alert right at the top of the method and see if it hits that. It's possible you're hitting some kind of error somewhere. If an alert at the top of editvalidate doesn't occur, try changing the obsubmit to:

onsubmit="alert('hello!'); return editvalidate();"

then you should at least see "Hello!" when you click the submit button.

Answer 4

looking at the code it should be called

Or Try

onsubmit="editvalidate(); return false;"

Or check where it is not misplaced, I mean the javascript should be in <head> </head>

Answer 5

actually i used a password checking parameter in the first if block document.editprofile.password.value == ''

and i never used an attribute like password in the form.that was my mistake and so it was not working.i found it using the firebug tool.thanks for the help.