I am using jQuery validation plugin to validate username is already existing or not.
Validation is working, I want to insert an icon after the input element if validation is successful. code is like this:
$(function () {
$("#register").validate({
//...
success: function(element) {
if (element.is('input[name="name"]')) {
//'<i class="fa fa-check fa-lg"></i>' is an icon
$('input[name="name"]').after('<i class="fa fa-check fa-lg"></i>');
}
},
//...
});
});
The first argument to success is the label element, not the input
jQuery(function($) {
var validator = $('#myform').validate({
rules: {
name: {
required: true,
minlength: 3
},
somefield: {
required: true,
minlength: 5
}
},
messages: {},
success: function(label, elem) {
var element = $(elem);
if (element.is('input[name="name"]') && !element.next().is('i.fa-check')) {
element.after('<i class="fa fa-check fa-lg"></i>');
}
}
});
});
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.js"></script>
<form id="myform" method="post" action="">
<input name="name" />
<input name="somefield" />
<input type="submit" value="Save" />
</form>
Related
I'd like to validate a form with a textarea. So far so good. But when I try to initialize the textarea with the jQuery validate plugin nothing happens. The tooltip doesn't show up. I'm using tooltipster along with the jQuery-validate plugin.
In the console there are no JavaScript-errors showing up.
This is the form:
<form name="reportForm" id="reportForm" method="POST">
<div class="form_alt_design">
<label for="the_report"></label>
<textarea name="report" cols="60" rows="4" maxlength="2000" id="the_report" class="report_textbox"></textarea>
</div>
<div id="report_button_container" style="text-align:right;">
<input class="button_large2" type="submit" name="Submit" id="report_submit" value="<?php echo GAME_SUBMIT_REPORT;?>" onclick="submitReport(<?php echo $id.",'".$type;?>')" />
<input class="button_large2" type="submit" name="Submit" id="report_submit" value="<?php echo GAME_SUBMIT_REPORT;?>" onclick="" />
<input type="hidden" name="token" id="token" value="<?php echo $reportToken; ?>" />
</div>
the JavaScript-code:
$(document).ready(function() {
$('#reportForm textarea').tooltipster({
trigger: 'custom',
animation: 'fade',
animationDuration: 250,
delay: 0,
onlyOne: true,
position: 'right',
theme: ['tooltipster-noir', 'tooltipster-noir-customized']
});
// initialize validate plugin on the form
$('#reportForm').validate({
errorPlacement: function (error, element) {
var ele = $(element),
err = $(error),
msg = err.text();
if (msg != null && msg !== '') {
ele.tooltipster('content', msg);
ele.tooltipster('open');
}
}
},
success: function (label, element) {
$(element).tooltipster('hide'); },
unhighlight: function(element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass).tooltipster('close');
},
rules: {
the_report: {
required:true
}
},
submitHandler: function (form) {
}
});
You've assigned the required rule to the_report but your textarea contains name="report".
You can only use the name within the rules object.
rules: {
report: { // <- MUST match the NAME, not the ID
required: true
}
},
You never stated which version of ToolTipster, but here is a working jsFiddle demo using v4.0
REFERENCE: Proper jQuery Validate integration for ToolTipster versions 2, 3, and 4.
I have one subscription form with ajax. The problem is that success and error messages are always on the page. Why they are on the page and how to hide them until form is submitted?
This is my js function
$(document).ready(function(){
(function($) {
"use strict";
// validate subscribeForm form
$(function() {
$('#subscribeForm').validate({
rules: {
name: {
required: true,
minlength: 4
},
email: {
required: true,
email: true
}
},
messages: {
name: {
required: "Please enter your name?",
minlength: "Your name must consist of at least 4 characters"
},
email: {
required: "Please enter your email address"
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"subscribe.php",
success: function() {
$('#subscribeForm :input').attr('disabled', 'disabled');
$('#subscribeForm').fadeTo( "slow", 0.15, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#sub_success').fadeIn();
});
},
error: function() {
$('#subscribeForm').fadeTo( "slow", 0.15, function() {
$('#sub_error').fadeIn();
});
}
})
}
})
})
})(jQuery)
})
And this is the form
<div class="footer-newsletter row footer-widget right-box">
<h3 class="footer-title">newsletter sign up</h3>
<form class="form-inline newsletter-form" id="subscribeForm" method="post" action="">
<input type="text" id="name" name="name" class="form-control" placeholder="Name">
<input type="email" id="email" name="email" class="form-control" placeholder="Email">
<button type="submit" class="btn btn-primary" name="sub_submit">Submit</button>
</form>
<div id="sub_success">You subscribe succesfully!</div>
<div id="sub_error">Opps! There is something wrong. Please try again</div>
</div>
So sub_success and sub_error are always on the page..
Change this following things in your code:-
<div id="sub_success" style="display:none">You subscribe succesfully!</div>
<div id="sub_error" style="display:none">Opps! There is something wrong. Please try again</div>
use this type alert it will gone in 3sec
$('#success_message').fadeIn(1000).html("<div class='alert alert-danger' role='alert' style='font-size: 15px;'>Soory some there is some error,please enter again data...</div>").fadeOut(3000);
Just add .hide on document.ready for both elements as below:
$(document).ready(function(){
$('.sub_success,.sub_error').hide();
});
You could just write a css
#sub_success, #sub_error {display:none}
then with jquery you can just show and hide by using
$("#sub_success").show();
$("#sub_error").hide();
now there is only problem not disabled anchor tag i had include ajax submit library which is working now i only want to disabl anchor during processing but i can't disabled niether with "disable" nor with e.preventDefault()
And thanks all of you for your help
<?php } else if ($currStep == 1) { ?>
<div class="row setup-content" id="step-2">
<div class="col-xs-9 col-md-offset-1">
<form id="form-change-password" class="form-horizontal" role="form" method="post" action="<?php echo base_url('user/save_password'); ?>">
<div class="form-group">
<label for="inputEmail" class="control-label col-md-3" style=" padding-left: 0px; ">New Password * </label>
<div class="col-md-9">
<input type="password" class="form-control input-sm password" id="inputfield1" value="<?php echo set_value('password'); ?>" placeholder="New Password" name="password">
<span class="alert-danger"><?php echo form_error('password'); ?></span>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-md-3" style=" padding-left: 0px; ">Confirm Password * </label>
<div class="col-md-9">
<input type="password" class="form-control input-sm" id="inputfield1" value="<?php echo set_value('cpassword'); ?>" placeholder="Confirm Password" name="cpassword">
<span class="alert-danger"><?php echo form_error('cpassword'); ?></span>
</div>
</div>
<div class="form-group ">
<label for="inputfield2" class="col-sm-4 control-label"></label>
<div class="col-sm-8">
Next
<div class="loading-2 btn btn-default pull-right hidden" style="width: 70px">
<img src="<?php echo base_url() . 'assets/frontend/img/loading-spinner-blue.gif'; ?>" alt="">
</div>
<button type="submit" class="save-2 submit btn btn-success pull-right">Save</button>
Back
</div>
</div>
</form>
</div>
</div>
<?php } else if ($currStep == 2) { ?>
and i changed js to this
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script> $('.loading-2').hide();</script>
<script>
$(document).ready(function () {
$('#form-change-password').validate({// initialize the plugin
rules: {
password: {
required: true,
minlength: 6
},
cpassword: {
equalTo: ".password"
}
},
messages: {
password: " Enter Password with 6 minimum characters",
cpassword: "Password not matched"
},
submitHandler: function () {
$("#form-change-password :input").prop("disabled", true);
$("#form-change-password a").prop("disabled", true);
$(".stepwizard-row a").prop("disabled", true);
$(".loading-2").removeClass('hidden');
$('.save-2, .loading-2').toggle();
$('#form-change-password').ajaxSubmit({
success: function (result) {
console.log(result);
if (result == 1) {
setTimeout(function () {
$("#form-change-password :input").prop("disabled", false);
$("#form-change-password a").click(function (e) {
console.log("oye sabar ker");
e.preventDefault();
});
$(".stepwizard-row a").prop("disabled", false);
$('.save-2, .loading-2').toggle();
}, 10000);
} else {
}
}
});
},
});
});
</script>
It looks like there is a comma missing.
Please change
cpassword :"Password not matched"
}
submitHandler: function() {
to
cpassword :"Password not matched"
},
submitHandler: function() {
You're missing a comma after the messages block in your javascript.
I've standardised the indentation on the code so it's easier to read. This also makes it much easier to spot errors.
In addition, you had inconsistent spaces around colons, so I tidied those too.
Edit: jQuery matches the id of the input, not the name.
<script>
function savepassword() {
$('#password').validate({ // initialize the plugin
rules: {
password: {
required: true,
minlength: 6
},
cpassword: {
equalTo: "#inputfield1"
}
},
messages: {
password: " Enter Password with 6 minimum characters",
cpassword: "Password not matched"
},
submitHandler: function() {
$('.save-2, .loading-2').toggle();
$.ajax({
type: "POST",
url: "<?php echo base_url('user/save_password'); ?>",
data: {
password: $('#password input[name="password"]').val(),
cpassword: $('#password input[name="cpassword"]').val()
},
success: function (result) {
console.log(result);
}
});
$('.save-2, .loading-2').toggle();
}
});
}
</script>
This is not something you have asked. But the best way to disabled page or sections when processing is by adding an overlay element using css and also with the loading icon preferably. This would avoid all the hassle and also provides better presentation.
Thanks all i do it by copying all remove href attr and then again add href and its value after ajax call it works for me, if you have any better idea please tell me
<script> $('.loading-4').hide();</script>
<script>
$(document).ready(function () {
$('#form-update-profile').validate({// initialize the plugin
rules: {
title: {
required: true
},
department: {
required: true
},
description: {
required: true
}
},
submitHandler: function () {
$(".loading-4").removeClass('hidden');
$('.save-4, .loading-4').toggle();
$('.messages-success, .messages-danger').removeClass('hidden').addClass('hidden');
$("#form-update-profile :input").prop("disabled", true);
var nextHref = $("#form-update-profile .next").attr("href");
var backHref = $("#form-update-profile .back").attr("href");
var linkpage0 = $(".stepwizard-step .first").attr("href");
var linkpage1 = $(".stepwizard-step .second").attr("href");
var linkpage2 = $(".stepwizard-step .third").attr("href");
var linkpage3 = $(".stepwizard-step .fourth").attr("href");
var linkpage4 = $(".stepwizard-step .fifth").attr("href");
$("#form-update-profile a").removeAttr("href");
$(".stepwizard-step a").removeAttr("href");
$('#form-update-profile').ajaxSubmit({
error: function () {
$('.messages-danger .alert-danger').text("Some Error Occurred, Please try again");
$('.messages-danger').removeClass('hidden');
},
success: function (response) {
response = $.parseJSON(response);
if (response['status'] == true) {
$('.messages-success .alert-success').text(response['message']);
$('.messages-success').removeClass('hidden');
} else {
$('.messages-danger .alert-danger').text(response['message']);
$('.messages-danger').removeClass('hidden');
}
},
complete: function () {
$("#form-update-profile .next").attr("href", nextHref);
$("#form-update-profile .back").attr("href", backHref);
$(".stepwizard-step .first").attr("href", linkpage0);
$(".stepwizard-step .second").attr("href", linkpage1);
$(".stepwizard-step .third").attr("href", linkpage2);
$(".stepwizard-step .fourth").attr("href", linkpage3);
$(".stepwizard-step .fifth").attr("href", linkpage4);
$("#form-update-profile :input").prop("disabled", false);
$("#form-update-profile input").val('');
$('.save-4, .loading-4').toggle();
}
});
},
});
});
</script>
Script : Jquery
I am new to jquery, and I found this piece of code which I tried but didn't succeed. It uses jquery validator plugin. Here is the code :
<html>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.1.47/jquery.form-validator.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>
How do I achieve this ? here is the link http://jsfiddle.net/cMhQ7/
looks like the validator plugin version you are using is causing the issue. Try the following one http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js
or any from the page jqueryvalidation.org hotlink
I hope this fixes the issue.
try this
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form id="employment-application" method="post">
<input name="full_name" type="text" />
<div id="full_name_validate"></div>
<input type="submit" />
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function validate() {
var rules = {
rules: {
full_name: {
minlength: 2,
maxlength: 50,
required: true
},
},
errorPlacement: function (error, element) {
var name = $(element).attr("name");
error.appendTo($("#" + name + "_validate"));
},
};
$('#employment-application').validate(rules);
});
</script>
</body>
</html>
Working on static pages only.. no backend is present...Hi trying to navigate between html pages, and succeesful in that. But need to switch the page only when the form is properly validate, have tried but its not working..
Need some help...
HTML:
<div class="formContainer">
<form class="form" id="loginForm">
<div class="form-group">
<label>Login</label>
</div>
<div class="form-group">
<label for="loginForm-email">Email address</label>
<input type="email" class="form-control" id="loginForm-email" name="loginForm-email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="loginForm-password">Password</label>
<input type="password" class="form-control" id="loginForm-password" name="loginForm-password" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
JS:
$(document).ready(function () {
var fnValidate = $("#loginForm").validate({
rules: {
"loginForm-email": {
required: true,
email: true
},
"loginForm-password": {
required: true,
minlength: 5
}
}
});
$('.btn').click(function(e) {
e.preventDefault();
if(fnValidate){
window.location.reload(true);
window.location.href = '../html/userPage.html';
}
else{
alert('hia');
}
});
});
The jQuery validator has custom success and failure callbacks which you can use.
As per your current approach, the fnValidate will return you an object. So you won't know whether it's validated or not. So try using the following approach.
$(document).ready(function () {
$("#loginForm").validate({
rules: {
"loginForm-email": {
required: true,
email: true
},
"loginForm-password": {
required: true,
minlength: 5
}
},
submitHandler: function () {
console.log("inside valid");
window.location.reload(true);
window.location.href = '../html/userPage.html';
// this.submit()
},
invalidHandler: function (event, validator) {
// 'this' refers to the form
console.log("Please fill the form");
}
});
});
jsfiddle example : http://jsfiddle.net/mohamedrias/2vvaN/2/
submitHandler is called only if the form is valid. So there you can submit the form.