• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1552
  • Last Modified:

jquery validation validate onSubmit

I have a custom validation to validate on submit I've added a function to do that but it is also validate as I type. How can i change it so it is only validate when i click the submit button

$.validator.addMethod("filename", function(value, element) {
             
                         return this.optional(element) || /^.*\.(html|htm|swf)$/i.test(value);
            }, "Please specify a valid file name");
0
erikTsomik
Asked:
erikTsomik
1 Solution
 
HagayMandelCommented:
Insert the code in a submit event:
Suppose your submit button has an id of 'submit':

 $('#submit') .submit(function() {
  //Do the validation here:
}):
0
 
Michel PlungjanIT ExpertCommented:
0
 
mcnuteCommented:
if you put validation into submit be sure to add e.preventDefault(); to it. Otherwise it just submits as supposed without validating.

$('#submit') .click(function(e) {
e.preventDefault(); // prevents from submitting

// do validation here

if(valid) {
$(this).submit();

} else {
// show error msg somewehre
}
}): 

Open in new window

0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Roopesh ReddyIT AnalystCommented:
Hi,

Should be like this -

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});

Open in new window


More info - http://docs.jquery.com/Plugins/Validation/Validator#Validator

Hope it helps u...
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
The problem is I the onchange event that what I think is triggering the validation as I start typing.
$('#server').change(function () {
                        if ($("#server").val() == 0) {
                              $("#file1").parent().show();
                              $("#file2").parent().hide();
                              $("#file2").val('');
                        }else{
                              $("#file1").parent().hide();
                              $("#file2").parent().show();
                              $("#file1").val('');
                        }
                  }).change();
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

May be! Check that too!
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
I did . I just don't know how to overcome this.
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Just comment that code!
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
I can not because it is conditional depends on the value of server certain field will shown/hidden
0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Can you post the full code? I'm not getting your problem exactly!
0
 
erikTsomikSystem Architect, CF programmer Author Commented:
<script>
$(document).ready(function(){
			$.validator.addMethod("filename", function(value, element) {
               // return this.optional(element) || /^[a-z]\w*\.(html|htm|swf)$/i.test(value);
				 return this.optional(element) || /^.*\.(html|htm|swf)$/i.test(value);
            }, "Please specify a valid file name");



});


	$(document).ready(function () {
		//alert($("#locOwner").val());
		$("#audienceName").parent().show();
		if ($("#locOwner").val() == 0){
			$("#creator").parent().show();
			$("#tool").parent().show();
			$("#server").parent().show();
			$("#file1").parent().hide();
			$("#file2").parent().hide();
			$('#server').change(function () {
				if ($("#server").val() == 0) {
					$("#file1").parent().show();
					$("#file2").parent().hide();
					$("#file2").val('');
				}else{
					$("#file1").parent().hide();
					$("#file2").parent().show();
					$("#file1").val('');
				}
			}).change();
		}else{
			$("#creator").parent().hide();
			$("#tool").parent().hide();
			$("#server").parent().hide();
			$("#file1").parent().hide();
			$("#file2").parent().hide();
		}
	});
</script>

$('#audienceForm').validate(
{
rules: {
creator: {
required: function(element) {
return ($("#locOwner").val()== 0);
}
},
tool: {
required: function(element) {
return ($("#locOwner").val()== 0);
}
},
server: {
required: function(element) {
return ($("#locOwner").val()== 0);
}
},
audienceName:{
required: function(element){
return ($("#adminAudience").val().length == 0);
}
},
file1: {
required: function(element) {
return ($("#locOwner").val()== 0 && $("#server").val()== 0);
}
,
filename: true
},
file2: {
required: function(element) {
return ($("#locOwner").val()== 0 && $("#server").val()== 1);
},
url:true
}
},
messages:{
audienceName:{ required: 'Enter a Administrator Audience.'}
}
}
);

Open in new window

0
 
Roopesh ReddyIT AnalystCommented:
Hi,

Why two $(document).ready() functions?

Can you also post the HTML, so that we can test at our end and assist you better?

OR
create a simple stuff for us to check and we will assist to you on that!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now