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
Related
I have a registration form, in which I have used JavaScript form validator
My form
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form class="form-group" method="post" id="contact-form">
{% csrf_token %}
<input type"text" name="username" placeholder="userid" id="id_username"/>
<input type"email" name="email" placeholder="email" id="id_email"/>
<input type"password" name="password1" placeholder="password1" id="id_password1"/>
<input type"password" name="password2" placeholder="password2" id="id_password2"/>
<input type="address" name="address" placeholder="address" id="id_address"/>
<input type="submit"/>
</from>
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#contact-form').validate({
rules: {
username: {
minlength: 5,
required: true
},
email: {
required: true,
email: true
},
password1: {
minlength: 6,
required: true
},
password2: {
required: true,
minlength: 6,
equalTo: "#password1",
},
address: {
minlength: 5,
required: true,
},
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
}
});
});
I want to RegEx pattern to address like only /-()., these charters are only allowed with alphabets
how do I use pattern RegEx in this?
try this
address: {
minlength: 5,
maxlenght=50,
required: true,
regex: /^[a-zA-Z0-9\s,'-./()]*$/,
},
First, I have a script for validation, its working fine and if I added a script for the alert box, validation function is not working. What I need is first, the validator should execute and after that, the alert for the button should execute.
<script>
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
}
});
</script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
alert("Hello World!");
});
});
</script>
Use submitHandler:
$("#ContactForm1").validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
alert("Hello World!");
}
});
Here is working example.
To check if your form is valid simply use:
if ($( "#ContactForm1" ).valid())
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#ContactForm1" ).validate({
rules: {
fname: "required",
lname: "required",
phone: "required",
email: {
required: true,
email: true
},
message: "required",
},
submitHandler: function() {
//$('#btn').click();
}}
);
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
$(document).ready(function(){
$("#btn").click(function(){
if ($( "#ContactForm1" ).valid()) {
alert('runs only if form is valid');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
<form id="ContactForm1" method="get" action="">
<fieldset>
<legend>Please provide your name, email address (won't be published) and a comment</legend>
<p>
<label for="fname">Name (required, at least 2 characters)</label>
<input id="cname" name="fname" minlength="2" type="text" required>
</p>
<p>
<label for="email">E-Mail (required)</label>
<input id="email" type="email" name="email" required>
</p>
<p>
<label for="phone">Phone (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="phone">URL (optional)</label>
<input id="phone" type="phone" name="phone">
</p>
<p>
<label for="message">Your message (required)</label>
<textarea id="message" name="message" required></textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit">
</p>
<p>
<button type="button" id="btn">Your button</button>
</p>
</fieldset>
</form>
My imported scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/additional-methods.min.js"></script>
My form:
<input name="tel" type="text" class="form-control contact" >
<input name="mobile" type="text" class="form-control contact" >
<input name="email" type="email" class="form-control contact" >
My validation rules:
$('#new-contact-form').validate({
rules: {
name: { required: true },
title: { required: true },
mobile: { require_from_group: [1, '.contact'] },
tel: { require_from_group: [1, '.contact'] },
email: { require_from_group: [1, '.contact'] },
}
});
When validator validates form inputs Im getting error message for each input: Please fill at least 1 of these fields even if I have one or more inputs filled. Did I missed something?
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 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