** 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
Related
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 have a text field generated by contextmenu, and I want it to be selected by default (autofocus by default). I do not succeed with the function jquery focus [$ ('. classInput'). focus ()]
$(function(){
$.contextMenu({
selector: '.input-context-menu',
items: {
// <input type="text">
name_input: {
name: "Name input :",
type: 'text',
value: "value_input",
events: {
keyup: function(e) {
...
Set focus in the events.show section.
You'll need timeout to let the input element appear in the DOM before setting focus.
The input name will be prefixed with context-menu-input-.
See the snippet below:
$(function() {
$.contextMenu({
selector: '.context-menu-one',
items: {
// <input type="text">
input1: {
name: "Text",
type: 'text',
value: "Hello World",
events: {
keyup: function(e) {
window.console && console.log('key: ' + e.keyCode);
}
}
}
},
events: {
show: function(opt) {
var $this = this;
$.contextMenu.setInputValues(opt, $this.data());
// Set focus to the input element
setTimeout(() => {
$('[name="context-menu-input-input1"]').focus();
}, 10);
},
hide: function(opt) {
var $this = this;
$.contextMenu.getInputValues(opt, $this.data());
}
}
});
});
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
<span class="context-menu-one btn btn-neutral">right click me</span>
Hope this helps.
I need to validate another ready made bad words filter after validating first rules (blank fields). I have all codes in ready made, someone please help me to add this second validation in my page.
This is my jquery codes where I need to include the 2nd validation.
$(function() {
$("#review").focus(function() {
$("#comments").removeClass('hide')
});
$("#sky-form").validate({
rules: {
digits: {
required: true,
digits: true
},
name: {
required: true
}
},
messages: {
digits: {
required: 'Please enter a valid amount of Money'
},
name: {
required: 'Please enter your username',
}
},
submitHandler: function(g) {
$(g).ajaxSubmit({
beforeSend: function() {
$('#sky-form button[type="submit"]').attr('disabled', true)
},
success: function() {success funtion goes here}
This is the 2nd validation codes that I need to include on top. Mainly I need this function - bwords=badwords(textbox_val); - It will verify bad word's after blank fields is okay.
<script language="javascript" type="text/javascript">
function Message()
{
var textbox_val=document.form.textbox.value;
if(textbox_val=="")
{
alert("Please enter a message");
return false;
}
bwords=badwords(textbox_val);
if(bwords>0)
{
alert("Your message contains inappropriate words. Please clean up your message.");
document.form.textbox.focus();
return false;
}
}
</script>
Those both function is working but I just need to include both validation like 2nd one in the top first script.
Sorry for my bad Enlgish.
You can add a new rule in your code. I called this rule badWords and for me the
bad word is BAD so when you try to type BAD in the name field you will get the
validation error message.
$.validator.addMethod("badWords", function(value, element) {
if (value.trim().length == 0) {
return false;
}
if (value == 'BAD') {
return false;
}
return true;
}, "BAD WORD");
$(function () {
$("#sky-form").validate({
rules: {
digits: {
required: true,
digits: true
},
name: {
required: true,
badWords: true
}
},
messages: {
digits: {
required: 'Please enter a valid amount of Money'
},
name: {
required: 'Please enter your username',
}
}
});
});
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<form id="sky-form">
<label for="ele1">Digits:</label>
<input type="text" id="ele1" name="digits"/>
<br/>
<label for="ele2">Name:</label>
<input type="text" id="ele2" name="name"/>
<br/>
<input type="submit" id="submit"/>
</form>
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.
I am using bootstrap template called Metronic. The asp:LinkButton below was simple button control. Just to be able to invoke the ServerSide event-handler (SubmitButton_Click), I converted it into asp:LinkButton control. But this time it doesn't invoke the javascript code. I tried OnClientClick. But didn't work.
Login.aspx:
<asp:LinkButton runat="server" ID="LinkButton1" CssClass="btn btn-default pull-right"
onclick="SubmitButton_Click">Log In<i class="m-icon-swapright m-icon-white"></i>
</asp:LinkButton>
<script>
jQuery(document).ready(function () {
App.init();
Login.init();
});
</script>
Part of login.js:
var Login = function () {
return {
//main function to initiate the module
init: function () {
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
..
..
}
Login.aspx.cs:
protected void SubmitButton_Click(object sender, EventArgs e)
{
..
}
Login.js:
var Login = function () {
return {
//main function to initiate the module
init: function () {
$('.login-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
rules: {
username: {
required: true
},
password: {
required: true
},
remember: {
required: false
}
},
messages: {
username: {
required: "Username is required."
},
password: {
required: "Password is required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
$('.alert-error', $('.login-form')).show();
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
window.location.href = "/Default.aspx";
}
});
$('.login-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.login-form').validate().form()) {
window.location.href = "index.html";
}
return false;
}
});
$('.forget-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: {
required: "Email is required."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
},
submitHandler: function (form) {
window.location.href = "index.html";
}
});
$('.forget-form input').keypress(function (e) {
if (e.which == 13) {
if ($('.forget-form').validate().form()) {
window.location.href = "index.html";
}
return false;
}
});
jQuery('#forget-password').click(function () {
jQuery('.login-form').hide();
jQuery('.forget-form').show();
});
jQuery('#back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.forget-form').hide();
});
$('.register-form').validate({
errorElement: 'label', //default input error message container
errorClass: 'help-inline', // default input error message class
focusInvalid: false, // do not focus the last invalid input
ignore: "",
rules: {
username: {
required: true
},
password: {
required: true
},
rpassword: {
equalTo: "#register_password"
},
email: {
required: true,
email: true
},
tnc: {
required: true
}
},
messages: { // custom messages for radio buttons and checkboxes
tnc: {
required: "Please accept TNC first."
}
},
invalidHandler: function (event, validator) { //display error alert on form submit
},
highlight: function (element) { // hightlight error inputs
$(element)
.closest('.control-group').addClass('error'); // set error class to the control group
},
success: function (label) {
label.closest('.control-group').removeClass('error');
label.remove();
},
errorPlacement: function (error, element) {
if (element.attr("name") == "tnc") { // insert checkbox errors after the container
error.addClass('help-small no-left-padding').insertAfter($('#register_tnc_error'));
} else {
error.addClass('help-small no-left-padding').insertAfter(element.closest('.input-icon'));
}
},
submitHandler: function (form) {
window.location.href = "index.html";
}
});
jQuery('#register-btn').click(function () {
jQuery('.login-form').hide();
jQuery('.register-form').show();
});
jQuery('#register-back-btn').click(function () {
jQuery('.login-form').show();
jQuery('.register-form').hide();
});
}
};
}();
Use a jQuery selector to handle the click of the anchor that results from the LinkButton being rendered to HTML, like this:
Markup:
<asp:LinkButton runat="server" ID="LinkButton1"
CssClass="btn btn-default pull-right TheLinkButton"
onclick="SubmitButton_Click">
Log In<i class="m-icon-swapright m-icon-white"></i>
</asp:LinkButton>
Note: The CssClass value has had TheLinkButton added to it to allow for a simpler jQuery selector to be made using the dot (.) notation as opposed to an ID (#) selector. The main reason for this is that when using ASP.NET with master pages, the naming containers mangle the IDs of controls, while class names are unaffected.
JavaScript:
jQuery(document).ready(function () {
App.init();
Login.init();
jQuery('.TheLinkButton').click(function() {
// Do what you need to do on the client-side
// when the link button is clicked here
});
});