jQuery focus on Alert box with clicking on button - javascript

I have a form, after submitting form when button is clicked using jQuery like this.
function validate(){
if($('#firstname').val() =="")
alert("Please enter your first name");
else if($('#lastname').val() == "")
alert("Please enter your last name");
else if( $('#association').val() == "")
alert("Choose your association");
else if($('#association_no').val() == "")
alert("Please enter your association number");
else
$('#register').submit();
}
$(function(){
$(".enter_submit").keyup(function(event) {
if(event.keyCode === 13)
validate();
})
})
The alert box is displaying fine but my issue that When I press enter after alert box is displayed, it gives another alert box instead of getting rid of the alert(Works fine when I click OK with mouse). In FF, it gives #prevent more alerts from this page. So I believe its still focusing on the form even after alert is displayed.

Specify return False after the alert box is displayed. This might not show other alert box at the same time.
function validate() {
if ($('#firstname').val() == "") {
alert("Please enter your first name");
return false;
}
else if ($('#lastname').val() == "") {
alert("Please enter your last name");
return false;
}
else if ($('#association').val() == "") {
alert("Choose your association");
return false;
}
else if ($('#association_no').val() == "") {
alert("Please enter your association number");
return false;
}
else {
$('#register').submit();
return true;
}
}
$(function () {
$(".enter_submit").keyup(function (event) {
if (event.keyCode === 13)
return validate();
});
});
Hope this help
Thanks
Prashant

I fixed this using blur function
$(".enter_submit").keyup(function(event) {
$(this).blur();
if(event.keyCode === 13)
return validate();
})
I figured that the text field was still on focus even when the alert was being displayed so had to take it out of focus i.e, blur it. Thanks to everyone who replied.

Related

HTML - Javascript - input condition

Ive been looking but cant seem to find much clarification...
I am creating a form -
If a user is to select an option for contact "email",
the user must enter a text value for email input type.
Here is a fiddle- https://jsfiddle.net/4s3bLf65/
if ($("input[name='option']").val()=='email') &&($("input[name='email1']").val() == '')
{
alert('Enter email');
return false;
}
I cant seem to figure out the proper syntax for the js...
Any suggestions?
Try that way:
if ($("input[name='option']:checked").val()=='email' && $("input[name='email1']").val() == '')
{
alert('Enter email');
return false;
}
Add your code to a click handler or submit handler so it executes when the button is pressed.
Your if had too many perentheses
You were not getting the value of the :checked box.
$(document).ready(function() {
$('input[name="btn_submit"]').click(function() {
if ($("input[name='option']:checked").val() == 'email' && $("input[name='email1']").val() == '') {
alert('Enter email');
return false;
}
});
});
Fiddle: https://jsfiddle.net/ojqa46a0/

How to check if a textbox is clicked on

I have a keyup function on my script and when I type into one of my text boxes it triggers my hotkey which hides the text box so it makes it impossible to type in it. Please help.
$(document).keyup(function(e){
if(e.which == 67){
if($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
});
I want something like this but I don't know the right word to put here.
$(document).keyup(function(e){
if(e.which == 67){
if($("#chat-input").is("clickedOn")){
return false;
}
else{
if($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
}
});
you can do it by checking the active element in jquery . The code should be like $(document.activeElement).attr("type") == "text" || $(document.activeElement).attr("id") == "chat-input")
Please let me know if it solves your problem
Try the following:
$(document).keyup(function(e) {
if(e.which == 67){
if (e.target.id == "chat-input") {
return false;
}
}
else {
if ($('#main').css('opacity') == 0) {
$("#cHideChat").click();
}
}
}
});

Jquery focusout runs several time by each mouse out click

I try to validate the textbox by mouse out in jquery, my code is running by any mouse out means it shows Enter valid Email. several times, any time that I click outside the textbox.
This is my code:
$(document).ready(function() {
$('#EmailAddress').focusout(function() {
var email = $.trim($('#EmailAddress').val() || '');
if (email.length == 0 || !emailregx.test(email)) {
$(this).addClass('ChangetoYellow');
$(this).after('<div class="Required">Enter valid Email.</div>');
return false;
} else {
$(this).next(".Required").remove();
$(this).removeClass('ChangetoYellow');
return true;
}
});
});
my code is not working when it is outside the document.ready.
This is what I get when I run by each time I click:
$(this).after('<div class="Required">Enter valid Email.</div>');
this will add a new after every focus out of the input box.
Instead have a placeholder div below the text box.
<div id="emailErrorMsg"></div>
and do
$('#emailErrorMsg').html('Enter valid Email.');
this will also let you add more error messages.
Remove the div before you add one to prevent repeats.
$(document).ready(function() {
$('#EmailAddress').focusout(function() {
var email = $.trim($('#EmailAddress').val() || '');
if (email.length == 0 || !emailregx.test(email)) {
$(this).addClass('ChangetoYellow');
if($(this).next().hasClass('Required'))
$(this).next().remove();
$(this).after('<div class="Required">Enter valid Email.</div>');
return false;
} else {
$(this).next(".Required").remove();
$(this).removeClass('ChangetoYellow');
return true;
}
});
});
I have implemented some code to validate text box and insert error div after the element if entered value is not valid.
I hope below code will solve your problem
$(document).ready(function() {
$('#EmailAddress').focusout(function() {
var email = $.trim($('#EmailAddress').val() || '');
if (email.length == 0 || !emailregx.test(email)) {
var errorLabel = errorsFor(this);
$(this).addClass('ChangetoYellow');
if(errorLabel.length > 0){
$(errorLabel).show();
}
else {
$(this).after('<div for='+ this.name +' class="required">Enter valid Email.</div>');
}
return false;
} else {
$(this).next(".required").remove();
$(this).removeClass('ChangetoYellow');
return true;
}
});
function errorsFor( element ) {
var name = idOrName(element);
return $('.required').filter(function() {
return $(this).attr("for") === name;
});
};
function idOrName( element ) {
return element.name ? element.name : element.id || element.name;
};
});
Test sample code
Try This one first remove previous error messages and add it.
JS
$(document).ready(function() {
$('#EmailAddress').focusout(function() {
var email = $.trim($('#EmailAddress').val() || '');
if (email.length == 0 || !emailregx.test(email)) {
$(this).parent().find(".Required").remove();
$(this).addClass('ChangetoYellow');
$(this).after('<div class="Required">Enter valid Email.</div>');
return false;
} else {
$(this).parent().find(".Required").remove();
$(this).removeClass('ChangetoYellow');
return true;
}
});
});
For Simple Example Fiddle (if u want add the regular expression and test it) -
http://jsbin.com/pujemay/edit?html,js,output

Validate email on enter

I want to validate an email textbox when I push the enter button. One problem: when i push enter, the text dissapears and nothing happens.
My code:
$(document).keypress(function(e) {
if (e.which == 13) {
mailcontrole();
}
});
function mailcontrole {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
function IsEmail(email) {
var regex = /^([a-zA-Z0-9_\.\-\+])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (!regex.test(email)) {
return false;
} else {
return true;
}
}
You have the default behaviour of submitting your form using the ENTER.
$(document).keypress(function(e) {
e.preventDefault();
if (e.which == 13) {
mailcontrole();
}
});
Adding e.preventDefault(); stops this behaviour!
UPDATE
Your function is missing () also ( Thanks to Alex )!
function mailcontrole() {
var mail = $("#email").val();
if (IsEmail(mail) == false) {
alert("false");
}
}
the form may submit because the form gets submitted when you click enter and that would empty the form.
use event.preventDefault() to make it not submit.
try this:
$(document).keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
mailcontrole();
}
});

Default button on enter and popup list

I'm trying to implement a form with multiple buttons on it. When I press enter I want to have my default button submitted. This code from http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/ generally works:
$(function() {
$("form input").keypress(function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
});
but...
when I type in input field I have an autocomplete popup so when I press enter in this popup I expect to put this value to input field, not submit all form. Can I check somehow if this enter comes from popup? Or I should try to do this different way?
EDIT:
I think I didn't say it clear. This popup is not any part of jquery. It's standard popup that shows previously typed data into input. So it hasn't got any class nor id. Stop propagation doesn't work either. None of solutions below resolve this problem
You could use :visible to see if the dropdown div for the autocomplete is open, and then prevent the enter key action of your code completing. Something like this:
$("form input").keypress(function(e) {
var key = e.which || e.keyCode;
if (key == 13 && !$(".autocomplete").is(":visible")) {
e.preventDefault();
$('form').submit();
}
});
You could also use event.stopPropagation() on the enter key press in the autocomplete function, however you'll probably have to amend the source manually which isn't ideal.
Before return false;
write
e.preventDefault();
or/and
e.stopPropagation();
$("form input").keypress(function (e) {
if (e.target.id !== "autoCompliteId" && ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13))) {
$('button[type=submit].default').click();
return false;
} else {
return true;
}
});
I modified my code and it works now.
I have an enum called Operation in my command and I set different value of the field before every submit button eg:
<input type="submit" value="do sth" onclick="setOperationAndSubmit('DO_STH')"/>
<input type="submit" value="next" onclick="setOperationAndSubmit('DEFAULT')"/>
function setOperationAndSubmit(operation) {
if (document.myForm.elements['operation'].value === '') {
document.myForm.elements['operation'].value = operation;
}
document.myForm.submit();
}
Then I have my action that listens to keypress and it set appropriate operation on every enter key:
$(function() {
$("form input").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
document.myForm.elements['operation'].value = 'DEFAULT';
}
});
});
so default action is executed when I press enter

Categories

Resources