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.
Related
I have html like these
<form class="form-filter" id="form-filter-excel" role="form">
<div class="row">
<div class="col-md-4 col-sm-5">
<label>Date range</label>
<div class="input-group input-daterange datepicker">
<input id="fRange" name="fRange" class="form-control input-sm" type="text">
<span class="input-group-addon bg-primary">to</span>
<input id="sRange" name="sRange" class="form-control input-sm" type="text">
</div>
</div>
<div class="col-md-2 col-sm-1">
<label>
</label>
<a class="btn btn-wide btn-primary form-control" href="#" id="btnexport" ><i class="fa fa-file-excel-o"></i> Export To Excel</a>
</div>
</div>
</form>
end here my screen shoot
My question i wanna use validate() on jquery, but i'm kinda stuck i wanna use class= "input-daterange" as field, and the input fRange and sRange as required. How do i did that, if i using fRange and sRange as field, the error massage show up mess. Any idea??
UPDATE :
Sorry for not unclear my question
I'm using jquery validate like these
$('#form-filter-excel').validate({
highlight: function(element) {
$(element).closest('.form-group').prop('required',true);
},
unhighlight: function(element) {
$(element).closest('.form-group').prop('required',false);
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},
rules: {
fRange: {
required: true,
date: true
},
sRange: {
required: true,
date: true
}
},
messages: {
fRange: "Please insert these input",
sRange: "Please insert these input"
},
});
$('#btnexport').click(function() {
$('#form-filter-excel').valid();
if($('#form-filter-excel').valid()==true)
{
var Fod = $('#fRange').val();
var Tod = $('#sRange').val();
window.open(host+"ajax/excelpoinfo?Fod=" + Fod +"&Tod=" + Fod, '_blank');
}
});
but the problem is the error massage not show under my input but show error like these on my screen
What i need is the error massage show on under each my input.
UPDATE:
I change my mind, i'm using sweet alert then, tq for helping. And for Mayank Pandeyz, u didnt see my question clearly, like i said, that not helping, even u said change replacement. Still not work.
On both the textbox provide the name attribute with its values like:
<form id="frmDetails" name="frmDetails">
<input type="textbox" name="fRange">
<input type="textbox" name="sRange">
</form>
And put the validation code on these like:
$('#frmDetails').validate({
rules:
{
fRange: {
required: true
},
sRange: {
required: true
}
},
messages:
{
fRange: {
required: "Please select fRange"
},
sRange: {
required: "Please select sRange"
}
}
});
Working Fiddle
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>
I have a very typical example of jQuery validation form but it doesn't seem to work.
Here is my code:
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" required and 13 or larger.</title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<h3>Contact Form</h3>
<form method="POST" class="form-horizontal" id="contact-form" action="">
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls">
<input type="text" name="name" id="name" placeholder="Your name" size="50">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email Address</label>
<div class="controls">
<input type="text" name="email" id="email" placeholder="Your email address" size="50">
</div>
</div>
<div class="control-group">
<label class="control-label" for="message">Message</label>
<div class="controls">
<textarea name="message" id="message" rows="8" cols="52" class="span5" placeholder="The message you want to send to us."></textarea>
</div>
</div>
<div class="control-group">
<?php
$var1 = rand(1,20);
$var2 = rand(1,20);
$sum = $var1 + $var2;
?>
<label class="control-label" for="captcha">Please enter the result of <?php echo $var1.' + '.$var2.' ='; ?>
</label>
<input type="text" id="captcha" name="captcha"><br/>
</div>
<br/>
<div class="form-actions">
<input type="hidden" name="save" value="contact">
<button type="submit" name="contact-submit" class="btn btn-success">Submit Message</button>
<button type="reset" class="btn">Cancel</button>
</div>
</form>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<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>
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
captcha: {
required: true,
min: <?php echo $sum; ?>,
max: <?php echo $sum; ?>
}
},
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');
});
jQuery.extend(jQuery.validator.messages, {
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
});
});
});
</script>
The only one thing needs to pay attention is my simple captcha. I use 2 php variables and its sum to check whether a spammer try to contact.
When I click on Submit button, the browser just refresh and nothing else happen, no error was generated. However, clicking Cancel button allow me to reset the form.
I have already searched for existing question relating to why jQuery validation did not work but can not figure out my case. Please help me to solve it. Any help is appreciated. Thank you in advance.
Based on suggestion from #Juhana, I worked around with my code and found another way to make my code work. I just replaced:
jQuery.extend(jQuery.validator.messages, {
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
by
messages: {
captcha: {
min: "Wrong answer",
max: "Wrong answer"
}
}
Thank you for your help.
You're breaking it because you've placed jQuery.extend() inside of the .validate() method; and you've improperly included a closing parenthesis and semicolon where there can only be a comma.
$("#contact-form").validate({
// options...
....,
success: function (element) {
....
}); // <- ');' is not valid here. Options must be separated by commas
jQuery.extend(jQuery.validator.messages, { // <- this is not a valid option!
min: jQuery.validator.format("Wrong answer."),
max: jQuery.validator.format("Wrong answer.")
});
});
Only the options provided by the developer can go inside of the .validate() method.
$("#contact-form").validate({
// options...
....,
success: function (element) {
....
}, // <- options must be separated by commas
messages: { // <- valid option
captcha: {
min: "Wrong answer",
max: "Wrong answer"
}
}
});
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.