How can i submit a form using jquery, my form is loaded on the bootstrap popover.
I tried the below jquery code but its NOT submitting the form
Ex.
I have to submit below form with id=161subproj, so how to submit this form once it loaded into the "popover"..
Hope my question is clear, if not please write comment.
FIDDLE DEMO
My html page:
<div id="project-div-id">
<ul style="padding: 0px 0 2px;margin-left: 0px;">
<li><span class="slilink"> personal</span>
<img class="del_btn" src="/images/icons/add.gif">
<form action="http://localhost/task/index.php/mypage" method="post" accept-charset="utf-8" name="161subproj" id="161subproj" style="display:none;">
<input type="text" value="2st">
<input class="red-tooltip" data-trigger="focus" placeholder="add sub project" name="project_name" type="text" >
</form>
</li>
</div>
Jquery code to submit this form
...............
...............
console.log($("#"+formidd));// NOTE: i have accurate form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
...............
...............
Form loaded on the popover:(I want to submit it when user press ENTER)
Full jquery code:
var formidd='';
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').text();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
console.log(formidd+'--getting form id');//i have loaded form id
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}, tooltip_options: {
sproject_name: {placement: 'center', html: true, trigger: 'focus'}
}
},
submitHandler: function(form) {
alert("form submit");
}
});
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
});
$(document).click(function(e) {
if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) {
$('.add_btn').popover('hide');
}
});
Demo
You need to move validate part out of from popover and put it onclick event like;
$('.add_btn').popover({
html: true,
title: function () {
formidd=$(this).parent().find('.projform_id').text();
return $(this).parent().find('.sub_proj_head').html();
},
content: function() {
return $(this).parent().find('.sub_proj_content').html();
}
});
$('.add_btn').click(function(e) {
$('.add_btn').not(this).popover('hide');
e.stopPropagation();
var formidd=$(this).parent().find('.projform_id').text();
console.log(formidd)
$("#"+formidd).validate({
rules: {
sproject_name: {
minlength: 3,
maxlength: 15,
required: true
}
},
submitHandler: function(form) {
alert("hi");
$(form).ajaxSubmit();
}
});
});
And put submit button in your forms.
Related
** Jquery submit button click after error message show **
jquery submit button after all field message show before error message not show.
i not want to fire error on click element, currently when I click on element it shows error directly.
$.validator.addMethod("PhoneValidation", (function(e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), PHONE_VALIDATE);
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: PHONE_VAL_REQUIRED
}
},
errorPlacement: function(e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
onfocusin: function(element) {
$(element).valid();
},
success: function(e){
$("#right-mark-img").removeClass( "opacity_0" );
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function(e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">' + LOADING + '...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
})
Your checking validation on focus element just remove onfocusin code.
your final code like below
$.validator.addMethod("PhoneValidation", (function (e) {
let regex = /^(0)(3)[0-9]{7}$/.test(e);
return(regex);
}), "Phone number is not validate");
$("#Number_validation_form").validate({
rules: {
pho_no: {
required: true,
PhoneValidation: true
}
},
messages: {
pho_no: {
required: "Phone number is required"
}
},
errorPlacement: function (e, t) {
t.is('input[name="accepted"]') ? e.insertAfter($(".checkboxlabel")) : e.insertAfter(t)
},
success: function (e) {
$("#right-mark-img").removeClass("opacity_0");
$("#pho_noNumberSubscriptionBtn").prop('disabled', false);
},
submitHandler: function (e) {
//console.log(e);
let load = '<span class="spinner-border spinner-border-sm spin" role="status" aria-hidden="true"></span><span class="sr-only">loading...</span>';
$("#pho_noNumberSubscriptionBtn").html(load);
$("#pho_noNumberSubscriptionBtn").prop("disabled", true);
}
});
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js" integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<form id="Number_validation_form" method="post" action="javascript:void(0);">
<input type="text" name="pho_no" placeholder="Phone Number">
<input type="submit" value="Validate">
</form>
</body>
</html>
Now Validation is fire on focus out of element
I recently removed the messages function from my validation. I then placed in jQuery validate's showErrors function so that I could get the borders for the required inputs to change to red. At this point, everything was working well until I added showErrors with it.
The reason for adding showErrors is that I wanted a simple message to appear, instead of multiple, and the borders to still show as red.
From my snippet below, you will see that only showErrors is currently working. Is there anyway to get both of these to work simultaneously. If so, how?
Alternatively, here is a jsfiddle
Adjusted JS
errorPlacement: function() {
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors();
},
submitHandler: function() {
submit();
},
$('#catalogRequestForm').validate({
ignore: [],
rules: {
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
},
address1: {
required: true,
minlength: 5
},
city: {
required: true,
minlength: 2
},
state: {
required: true
},
zip: {
required: true,
digits: true,
minlength: 5
},
email: {
required: true,
email: true
}
},
errorPlacement: function(){
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
},
submitHandler: function() {
submit();
},
});
.error {
border: 2px solid #b82222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>
Use this.defaultShowErrors() within showErrors to reactivate the default message behavior. Since you have a return false within errorPlacement, you only see your styling and not the messages.
showErrors: function(errorMap, errorList) { // <- disable default errorPlacement
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors(); // <- re-enable default errorPlacement
},
Read more: jqueryvalidation.org/validate/#showerrors
By only containing submit(), your submitHandler is completely broken. If that is your real function, then remove the submitHandler entirely because a regular form submit is already the default behavior. Otherwise, if you're doing something before the submit, then you'll need to pass a form argument and attach it to .submit().
submitHandler: function(form) { // <- pass 'form' argument into function
// do something, then submit
form.submit(); // <- attach 'form' argument to '.submit()'
}
DEMO:
$('#catalogRequestForm').validate({
ignore: [],
rules: {
first_name: {
required: true,
minlength: 2
},
last_name: {
required: true,
minlength: 2
}
},
errorPlacement: function() {
return false;
},
showErrors: function(errorMap, errorList) {
$('#formErrors').html('All fields must be completed before you submit the form.');
this.defaultShowErrors();
},
submitHandler: function(form) {
form.submit();
},
});
.error {
border: 2px solid #b82222;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<form method="POST" id="catalogRequestForm">
<input type="text" name="first_name" placeholder="First Name *">
<input type="text" name="last_name" placeholder="Last Name *">
<div id="formErrors"></div>
<input id="requestSubmit" type="submit" value="Submit">
</form>
jsFiddle version: jsfiddle.net/ryoufcqh/
I'm using some jQuery to do some form validation. The following is the validation script.
$(document).ready(function() {
$('#contact-form').validate({
rules: {
cf_name: {
minlength: 2,
required: true
},
cf_email: {
required: true,
email: true
},
phone: {
minlength: 10,
required: true
},
user_pass: {
minlength: 2,
required: true
},
validateSelect: {
required: true
},
validateCheckbox: {
required: true,
minlength: 2
},
validateRadio: {
required: true
}
},
focusCleanup: false,
highlight: function(label) {
$(label).closest('.control-group').removeClass('success').addClass('error');
},
success: function(label) {
label
//.text('OK!').addClass('valid')
.closest('.control-group').addClass('success');
},
errorPlacement: function(error, element) {
error.appendTo(element.parents('.controls'));
}
});
$('.form').eq(0).find('input').eq(0).focus();
}); // end document.ready
On my submit button, I have this code:
<input type="submit" value="SUBMIT" id="sub" class="sub_text">
I'd like to make it so that when a user clicks the submit button and the form validates before it does any fading/transitioning, that it does within this code:
$("#sub").click(function(){
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
});
But my problem is that if a user forgets a field and then hits submit, the overlay transition happens. I'd like it to only happen when there's a
success of validation.
How am I able to trigger the event only when it's validated?
Have you tried calling form.valid() as follows:
$("#sub").click(function(){
if($('#contact-form').valid()){
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
}
});
.valid() checks whether given form is valid or not.
You are using the wrong hook. You are attaching your fadein code into "click" event of the button, means just when the user clicks the button you will execute the fadein.
Solution? quite simple, just have a look at the jqueryvalidation doc (http://jqueryvalidation.org/validate), instead of fadein in click event of the button, just do it in the validation hook.
$('#contact-form').validate({
submitHandler: function(form) {
$("#forms").fadeOut( 1000 );
$("#overlay1").delay(1000).fadeIn( 1000 );
// do other things for a valid form
form.submit();
}
});
Can someone help me understand why onkeyup validation is not working? I have been staring at it too long! Thanks.
JSFiddle here.
Code:
$(document).ready(function () {
jQuery('#DSH0000000146FF').validate({
rules: {
dish_name: {
required: true
},
dish_description: {
required: true
}
},
messages: {
dish_name: {
required: "Please enter a name, no longer than 80 characters."
},
dish_description: {
required: "Please enter a description, no longer than 240 characters."
}
},
submitHandler: function (form) {
if(jQuery('#DSH0000000146FF').validate()){
alert("SUBMITTED!");
}
else{
}
}
});
});
Add submit button to form
<textarea id="DSH0000000146d" name="dish_description"
class="textarea-comment dish_description" maxlength="240">More testing
</textarea><br/>
<input type="submit"></input> <!-- Add this line -->
jsfiddle
I use Jquery form validation to validate form input data. There is a
confirm
check on
submit
of this form.
.
The code is:
<script type="text/javascript">
function Confirmation(){
var answer = confirm("Do you really want to withdraw this amount of money from your account?")
if (answer){
return true;
}
else{
return false;
}
}
$(document).ready(function() {
$("#withdraw").validate({
rules: {
amount: {
required: true,
digits:true
} ,
bank:{
required:true,
},
cardnumber1: {
required: true,
minlength:8
},
cardnumber2:{
required:true,
equalTo: "#cardnumber1"
},
holder:{
required:true,
}
}
})
});
</script>
I want the Jquery form validation is executed before the Confirmation(), how to do it?
Steven,
You need to remove the onsubmit handler from the form and add it the the submitHandler of the validate plugin ...
$("#withdraw").validate({
rules: {
amount: {
required: true,
digits:true
}
// .. other rules here
},
submitHandler: function(form){
if( Confirmation() )
form.submit();
}
})
I looked at the documentation and there is an option named submitHandler which I think would allow you to add your confirmation dialog before the form is submitted but after the validation happens. Try this...
<script type="text/javascript">
$(document).ready(function() {
$("#withdraw").validate({
submitHandler : function(form) {
if (confirm("Do you really want to withdraw this amount of money from your account?")) {
form.submit();
}
},
rules: {
amount: {
required: true,
digits:true
},
bank:{
required:true,
},
cardnumber1: {
required: true,
minlength:8
},
cardnumber2:{
required:true,
equalTo: "#cardnumber1"
},
holder:{
required:true,
}
}
})
});
</script>