Link to home
Create AccountLog in
Avatar of phparmy
phparmy

asked on

jquery form validation

i want ot validate like that

<html>
<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8">
      <script language="javaScript" src="../js/jquery-1.3.2.min.js" type="text/javaScript"></script>
      <script>
      function validate(targetForm){
            $(targetForm).submit(function(){
                  if($(':checkbox[myreq=1]').length > 0){
                        if($(':checkbox[myreq=1]:checked').length == 0){
                              var message = $(':checkbox[myreq=1]').attr('message');
                              alert(message);
                              return false;
                        }
                  }
            });
      }
      </script>
</head>
<body>
<form action="page.php" method="post"  onsubmit="return validate(this)">
      <input type="checkbox" name="f[0]" value="0" myreq="1" id="f" message="Please Fill Form">
      <input type="checkbox" name="f[1]" value="1" myreq="1" id="f" message="Please Fill Form">
      <input type="checkbox" name="f[2]" value="2" myreq="1" id="f" message="Please Fill Form">
      <input type="submit" name="send" id="send" value="Ok">
</form>
</body>
</html>

this is my code everything ok but i cant get targetForm something missing here. how can i fix it.
i want to send validate(this) for specifiying which form i want to validate. sending validate(this) current submitted form means.

thanks.
Avatar of richardneililagan
richardneililagan
Flag of Philippines image

if you're going to include the jQuery library in your application, might as well use it as well right? :p

refactor your code to look a bit like this :

(code snippet)

1. give your form an ID attribute value. or at least something to identify it by.
2. use jQuery to attach the submit event to your form. this should be cross-browser compliant.

good luck!
<form id="myForm" action="page.php" method="post">
  <!-- put your form stuff here -->
</form>
 
<script type="text/javascript">
// let's add the submit event handler to our form here via jQuery
 
$('form#myForm').submit(function(){
   return validate(this);
});
</script>

Open in new window

Avatar of phparmy
phparmy

ASKER

1. give your form an ID attribute value. or at least something to identify it by.

i do not want to give an ID. i am asking that how can validate form without giving an id to form.

in pure javascript you can do like that.

<script>
function validate(targetForm){
   alert(targetForm.elements.length);
}
</script>
<form onsubmit="return validate(this)">
<input type="submit" value="Send">
</form>

i think i made mistake naming my function validate it is not jquery library validate function. it is my own function.



in jquery i do not know how to reach (this) value.
I know that it's a custom function. jQuery does not have a validate() function.

I do not know why you don't want to put in an ID attribute, considering that you're using ID attributes anyway in your INPUT fields. It's not necessarily bad practice, but it's a bit backwater. (And having the same ID attribute value for your INPUT fields is bad practice, fyi. you might also want to look at that :p)

But if you really don't want to resort to an ID attribute, then maybe you can use this :

(code snippet)

but this will only work if your form is the first form on your page.

<form id="myForm" action="page.php" method="post">
  <!-- put your form stuff here -->
</form>
 
<script type="text/javascript">
// let's add the submit event handler to our form here via jQuery
 
$('form:eq(0)').submit(function(){
   return validate(this);
});
 
function validate(targetForm){
   // put your custom function here
   alert(targetForm.elements.length);
}
 
</script>

Open in new window

you can take away the ID attribute above. just make sure that you change the jQuery selector as illustrated.
Avatar of phparmy

ASKER

please look my code below could anyone write this code in jquery. then i will find answer. sorry my english is not good enough.

thanks.
<script>
function validate(targetForm) {
 
	for (var i = 0; i < targetForm.elements.length; i++) {
 
		if(targetForm.elements[i].getAttribute("isReq")) {
 
			var message = targetForm.elements[i].getAttribute("message");
			
			if(targetForm.elements[i].type == 'text') {
				if(targetForm.elements[i].value == '') {
					alert(message);
					targetForm.elements[i].focus();
					return false;
				}
				
			}
		}
	}
}
</script>
<form onsubmit="validate(this)">
<input type="text" name="surname" isReq="1" message="Please enter your surname.">
<input type="submit" name="send1" value="Send">
</form>
 
<form onsubmit="validate(this)">
<input type="text" name="comment" isReq="1" message="Please enter your comment.">
<input type="submit" name="send2" value="Send">
</form>

Open in new window

try this.
<script type="text/javascript">
$('form').submit(function(){
  return validate(this);
});
 
function validate(targetForm)
{
  var message = "":
  var el = $(this).find('input:text[isReq]');
  for(var a=0; a < el.length; a++)
  {
    if(el.eq(a).val()!='') 
    {
      alert(el.eq(a).attr('message'));
      el.eq(a).focus();
      return false;
    }  
  }
  
  return true;
}
</script>
 
<form onsubmit="validate(this)">
<input type="text" name="surname" isReq="1" message="Please enter your surname.">
<input type="submit" name="send1" value="Send">
</form>
 
<form onsubmit="validate(this)">
<input type="text" name="comment" isReq="1" message="Please enter your comment.">
<input type="submit" name="send2" value="Send">
</form>`

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of richardneililagan
richardneililagan
Flag of Philippines image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of phparmy

ASKER

thanks richardneil but it is not worked.

for my code i made a mistake it has to be onsubmit="return validate(this)" not onsubmit="validate(this)"

<form onsubmit="return validate(this)">
<input type="text" name="surname" isReq="1" message="Please enter your surname.">
<input type="submit" name="send1" value="Send">
</form>
 
<form onsubmit="return validate(this)">
<input type="text" name="comment" isReq="1" message="Please enter your comment.">
<input type="submit" name="send2" value="Send">
</form>`
Avatar of phparmy

ASKER

$(targetForm).find('input:text[isReq]')
have to be like below
$("input[type='text'][isReq='1']", targetForm)