I am trying to use jquery.validate to validate some fields in a jquery modal dialog. To practice I thought I would create a simple JSFiddle to make sure my syntax is correct. I'm missing something, hopefully someone can help.
Here is my simple form:
<form id="myform" method="post" action="#">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
Here is my jquery:
$("#submitEdit").click(function (event) {
event.preventDefault();
Validate();
});
function Validate()
{
$("#frmEdit").validate({
rules: {
QtyOnHand: {
required: true
}
},
messages: {
QtyOnHand: {
required: 'Qty Required'
}
}
});
}
Working Fiddle Demo
Just keep
$("#frmEdit").validate({//this will validate you don't need call validate function
rules: {
QtyOnHand: {
required: true
}
},
messages: {
QtyOnHand: {
required: 'Qty Required'
}
}
});
Remove
$("#submitEdit").click(function (event) {
event.preventDefault();//stopping validation to occur
}
Problem Fiddle
<form id="myform" method="post" action="#">
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="submit" />
</form>
JS:
$("#myForm").validate({
rules: {
field1: {
required: true
},
field2: {
required: true
}
},
messages: {
field1: {
required: 'field1 Required'
},
field2: {
required: 'field2 Required'
}
}
});
check
Fiddle
Related
I've set all rules correctly, yet they seem to be ignored completely when I submit the Form.
Here is my code:
$(document).ready(function() {
$('#formValidation').validate({
rules: {
name: {
required: true,
minlength: 2,
lettersonly: true,
},
email: {
required: true,
minlength: 5,
email: true,
},
feedback: {
required: true,
minWords: 5,
},
}
messages: {
name: {
required: "Please enter your name",
},
},
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" onload="validate()">
<p>Name: <br/><input type="text" name="name" /> </p>
<p>Email:<br/><input type="email" name="email" /></p>
<p>Feedback:<br/><input type="text" name="feedback" id="textfield" />
<input type="submit" id="submit" onsubmit="return formValidation()" /> </p>
</form>
So, all you need is the following.
$(document).ready(function () {
$('#formValidation').validate({
rules: {
name: {
required: true,
minlength: 2,
lettersonly:true,
},
email: {
required: true,
minlength: 5,
email:true,
},
feedback: {
required: true,
minWords: 5,
}
},
messages: {
name:{
required:"Please enter your name",
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.js"></script>
<form id="formValidation" method="post">
<p>Name: <br/><input type="text" name="name" /> </p>
<p>Email:<br/><input type="email" name="email" /></p>
<p>Feedback:<br/><input type="text" name="feedback" id="textfield"/>
<input type="submit" id="submit"/> </p>
</form>
Removed unnecessary/extra ,s from your script.
Remove inline event handlers
I'm using jquery validation plugin to validate a form. It is working if all fields are left blank. But if I entered a file in the input field and leave blank the other required fields it doesn't validate the other elements anymore it just submit the form to the server.
<script>
$().ready(function() {
$("#form1").validate({
submitHandler: function (form) {
$.ajax({
type: $(form).attr('method'),
url: $(form).attr('action'),
data: $(form).serialize(),
})
.done(function (response) {
jAlert(response);
});
return false;
},
ignore: [],
rules: {
title: { required: true, minlength: 2, maxlength: 25 },
text1: {
required: function() {
CKEDITOR.instances.text1.updateElement();
}
},
text2: {
required: function() {
CKEDITOR.instances.text2.updateElement();
}
},
newsimage: {
required: true,
accept: "image/*"
},
},
messages: {
title: {
required: "Please enter the Title",
minlength: "Title must consist of at least 2 characters"
},
text1: {
required: "Please enter text",
minlength: "Must consist of at least 2 characters"
},
text2: {
required: "Please enter text",
minlength: "Must consist of at least 2 characters"
}
}
});
});
</script>
Here's the form
<form id="Form1" enctype="multipart/form-data" method="post" action="save.php" >
Title: <input name="title" size="40" maxlength="255">
<br>
<label for="newsimage">News Image</label>
<input type="file" id="newsimage" name="newsimage">
<br> News Summary:
<textarea id="text1" name="text1" rows="7" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'text1' );
</script>
<br> News Full Story:
<textarea id="text2" name="text2" rows="7" cols="30"></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'text2' );
</script>
<br> <input type="submit" name="submit" value="Add News">
You could use required on your form tags like this :
<input name="title" size="40" maxlength="255" required>
that should force some input. ( it is not sanitized )
It wasn't working on my end because I was missing additional-methods.js, so adding it solve the problem.
<script src="js/additional-methods.min.js"></script>
Try this user friendly validation plugin
https://github.com/vanarajcs/jquery-form-validation
in order to activate any jquery validation library first of all you need to define that library below jquery cdn. your structure should be like this:
<!-- define jquery file -->
<!-- Now define jquery validation library -->
for a safer side define you jquery file on header and your validation library after main code.
The validation is mot working, please specify the answer.
there is no validations working, the form is submitting without validations,
I am using the xajax in codeigniter
this is my view or form
<form name="frmcontact" id="frmcontact" class="contact-form" action="">
<input type="text" name="name" id="name" placeholder="Name">
<input type="text" name="email" id="email" placeholder="E-mail">
<input type="text" name="mobile" id="mobile" placeholder="Mobile">
<textarea class="message1" placeholder="Message" name="message" id="message"></textarea>
<span class="error"> </span>
<input type="submit" value="Submit" >
</form>
and my javascript is
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.validate.js"></script>
<script type="text/javascript">
;(function($) {
$(document).ready(function() {
$("#frmcontact").submit(function(e){
e.preventDefault();
}).validate({
rules: {
name: {
required: true,
number:false
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
minlength:10,
maxlength:10
},
message: {
required: true
}
},errorElement: "span",
messages: {
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(){
xajax_contactsubmit(xajax.getFormValues('frmcontact'));
}
});
});
})(jQuery);
</script>
try this
jQuery(document).ready(function($) {
$("#frmcontact").validate({
rules: {
name: {
required: true,
number:false
},
email: {
required: true,
email:true
},
mobile: {
required: true,
number:true,
minlength:10,
maxlength:10
},
message: {
required: true
}
},errorElement: "span",
messages: {
},
errorPlacement: function(error, element) {
error.insertAfter(element);
},
submitHandler: function(){
xajax_contactsubmit(xajax.getFormValues('frmcontact'));
}
});
});
no need to handle and stop submit, the validate plugin will manage it by it self
I have a form that has required fields and it will not submit the form unless you fill in the required items, it works in google chrome and firefox but it does not work in safari. Why is that and does anyone now how to make it where the form can not be submitted unless the items are filled out that are required. Here is just a small amount of the code.
<form method="post" action="##" name="aForm" id="addClientForm" class="">
<input type="hidden" name="method" value="clientAdd">
<input type="hidden" name="datasource" value="<cfoutput>#request.dsn#</cfoutput>">
<input type="hidden" name="Active" value="1">
<div style="float:left;" class="formContent470">
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<th colspan="" style="text-align:left;">Add Client</th>
</tr>
<tr><cfoutput>
<td>
Contact
<span style="color:red">*</span>
<input type="Text" name="Contact" value="" required="Yes" message="Contact is required" maxLength="75" class="inputText430">
</td>
</tr>
And here is the jquery code that should make it work I believe.
$(document).ready(function() {
$("#addClientForm").validate();
rules: {
Contact: {
required: true
},
ClientName: {
required: true
},
ClientLogin: {
required: true
},
ClientPassword: {
required: true
},
Email: {
required: true
}
},
});
Thank you, any help is appreciated.
The code has error sintax.. I put the params rules on the method validate. On your example the param you put out of method.
$(document).ready(function() {
$("#addClientForm").validate({
rules: {
Contact: {
required: true
},
ClientName: {
required: true
},
ClientLogin: {
required: true
},
ClientPassword: {
required: true
},
Email: {
required: true
}
}
});
});
you can use required attribute in HTML5 to make a field mandatory to be filled. no javascript needed.
<input type='text' required name='surName'>
This is a good way to make it work with all browsers.
function hasHtml5Validation () {
return typeof document.createElement('input').checkValidity === 'function';
}
if (hasHtml5Validation()) {
$('.addClientForm').submit(function (e) {
if (!this.checkValidity()) {
e.preventDefault();
$(this).addClass('invalid');
$('#status').html('invalid');
} else {
$(this).removeClass('invalid');
$('#status').html('submitted');
}
});
}
<p>Status: <span id="status">Unsubmitted</span></p>
I have 4 fields in my form. Name, age, from and to. Name and age belong to error class(errror1) and from and to belong to error class(error2).
.error1 {
color: red;
}
.error2 {
color: green;
}
JS
jQuery( function ($) {
var classes = {
'Name': 'error1',
'Age': 'error1',
'from': 'error2',
'to': 'error2'
}
$('#form1').validate({
rules: {
'Name': {
required: true
},
'Age': {
required: true
},
'from': {
required: true
},
'to': {
required: true
}
},
messages: {
'Name': {
required: 'Name is required!'
},
'Age': {
required: 'Age is required!'
},
'from': {
required: 'from is required!'
},
'to': {
required: 'to is required!'
}
},
errorPlacement: function ( err, element ) {
err.addClass( classes[element.attr('name')] )
err.insertBefore( element );
},
submitHandler: function ( form ) {
form.submit();
}
});
});
$("#name1").click(function() {
$("label.error2").hide();
$(".error2").removeClass("error");
});
HTML
<form id="form1" method="post" action="">
<div>
<input name="Name" id="name1" />:name
</div>
<div>
<input name="Age" id="age1" />:age
</div>
<div>
<input name="from" id="from1" />:from
</div>
<div>
<input name="to" id="to1"/>:to
</div>
<input type="submit" value="Save" />
</form>
My requirement is when I click on name field the error message in from field only should disappear. Now both from and to field messages disappear. How can I implement that??
jsfiddle
Take a look at the following fiddle.
From what I understand you want to hide the validation on another field. You may get that field by its id and find the error lable which is a sibling.
$("#name1").click(function() {
$("#from1").siblings('.error').hide();
});
If you would like a more generic solution you may use data attributes.
Here is an example:
Add a descriptive data attribute to the input field you want to do the action from
<input name="Name" id="name1" data-hide-error-on="#from1"/>:name
Then your js can look like this:
$('input[data-hide-error-on]').click(function() {
var inputToHide = $(this).data('hide-error-on');
$(inputToHide).siblings('.error').remove();
});
Also I would suggest classes for you error label styling on the parent div. As you would lose the styling on the second submit when doing it your way.
<div class="green-errors">
<input name="Name" id="name1" data-hide-error-on="#from1"/>:name
</div>
CSS:
.green-errors label.error {
color: green;
}
See this fiddle.
Replace this code:
$("#name1").click(function() {
$("#form1").find($(".error2")).eq(0).hide();
$(".error2").removeClass("error");
});