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
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,'-./()]*$/,
},
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 facing some problems with jQuery Validate. I've already put the rules but when i'm submitting the form, nothing happens.
I'm using ASP.NET MVC 4 and Visual Studio 2010.
EDIT: Click here to see my entire code. I'm trying to post it here but i'm getting the following error: 403 Forbidden: IPS signature match. Below is part of my code with Andrei Dvoynos's suggestion. I'm getting the same error. Clicking on submit and the page being reloaded
#{
ViewBag.Title = "Index";
}
#section Teste1{
<script type="text/javascript">
$(document).ready(function () {
$("#moeda").maskMoney();
$("#percent").maskMoney();
$(":input").inputmask();
$('#tel').focusout(function () {
var phone, element;
element = $(this);
element.unmask();
phone = element.val().replace(/\D/g, '');
if (phone.length > 10) {
element.inputmask({ "mask": "(99) 99999-999[9]" });
} else {
element.inputmask({ "mask": "(99) 9999-9999[9]" });
}
}).trigger('focusout');
//the code suggested by Andrei Dvoynos, i've tried but it's occurring the same.
$("#form1").validate({
rules: {
cpf: { required: true, },
cep: { required: true, },
tel: { required: true, },
email: { required: true, },
cnpj: { required: true, },
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block'
});
});
</script>
}
#using (#Html.BeginForm("", "", FormMethod.Post,
new { id = "form1", name = "form1" }))
{
<fieldset>
<legend>Sign In</legend>
<div class="form-group" id="divCpf">
<label for="cpf">CPF</label>
<input data-inputmask="'mask': '999.999.999-99'" class="form-control" id="cpf" />
</div>
<div class="form-group" id="divCep">
<label for="cep">CEP</label>
<input data-inputmask="'mask' : '99999-999'" type="text" class="form-control" id="cep" placeholder="CEP" />
</div>
<div class="form-group" id="divTel">
<label for="tel">Telefone</label>
<input type="text" class="form-control" id="tel" placeholder="tel" />
</div>
<div class="form-group" id="email">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Email" />
</div>
<div class="form-group" id="divcnpj">
<label for="cnpj">CNPJ</label>
<input data-inputmask="'mask' : '99.999.999/9999-99'" type="text" class="form-control" id="cnpj" placeholder="CNPJ" />
</div>
<div class="form-group">
<label for="moeda">Moeda</label>
<input type="text" id="moeda" data-allow-zero="true" class="form-control" />
</div>
<div class="form-group">
<label for="Percent">Percent</label>
<input type="text" id="percent" data-suffix="%" data-allow-zero="true" class="form-control" maxlength="7" />
</div>
<input type="submit" class="btn btn-default" value="Sign In" id="sign" />
</fieldset>
}
My tests (all unsuccessful):
1 - put the $("form").validate() into $(document).ready()
2 - put the required class on the fields.
jQuery Validate plugin version: 1.13.0
In addition to the fatal problem you fixed thanks to #Andrei, you also have one more fatal flaw. The name attribute is missing from your inputs.
Every element must contain a unique name attribute. This is a requirement of the plugin because it's how it keeps track of every input.
The name is the target for declaring rules inside of the rules option.
$("#form1").validate({
rules: { // <- all rule declarations must be contained within 'rules' option
cpf: { // <- this is the NAME attribute
required: true,
....
DEMO: http://jsfiddle.net/3tLzh/
You're missing the rules property when calling the validate function, try something like this:
$("#form1").validate({
rules: {
cpf: { required: true, },
cep: { required: true, },
tel: { required: true, },
email: { required: true, },
cnpj: { required: true, },
},
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block'
});
I work with jquery validation plugin for validate my form. in my form I have jquery upload file using jquery form plugin.
JS:
$(document).ready(function()
{
$("#fileuploader").uploadFile({
url: "upload.php",
dragDrop:true,
multiple:false,
fileName: "myfile",
returnType:"json",
showDelete:true,
showFileCounter:false,
onSuccess:function(fileArray, data, xhr, pd)
{
var url = "download.php?filename="+data[0];
//pd.filename.html(data[0]);
pd.filename.html("<a href='"+url+"'>"+data[0]+"</a>");
},
deleteCallback: function(data,pd)
{
for(var i=0;i<data.length;i++)
{
$.post("delete.php",{op:"delete",name:data[i]},
function(resp, textStatus, jqXHR)
{
//Show Message
alert("File Deleted");
});
}
pd.statusbar.hide(); //You choice to hide/not.
}
});
});
$('form').validate({
ignore:'.uploadFile',
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
HTML:
<form>
<div id="fileuploader">Upload</div>
<div class="form-group">
<label class="control-label" for="firstname">Nome:</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
</div>
</div>
<div class="form-group">
<label class="control-label" for="lastname">Apelido:</label>
<div class="input-group">
<span class="input-group-addon">€</span>
<input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Now, jquery validation is a conflict with jquery form plugin and not validate my form. I tried ignore:'.uploadFile' function but jquery validation not work.
How can I fix this problem?!
Not Work DEMO : http://jsfiddle.net/hTPY7/1400/
Worked Demo without upload plugin: http://jsfiddle.net/hTPY7/1404/
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