Why in following code don't work this part if(!$(this).val()){... from code and this match is true with http://www.st, i want as: http://stackoverflow.com ?
Example: http://jsfiddle.net/gp9nL/3/
$('.url').keyup(function(){
if (!$(this).val().match(/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \?=.-]*)*\/?$/)){
$(this).css("background", "#ffc4c4");
result = false;
}else {
$(this).css("background", "#FFFFEC");
result = true;
}
if(!$(this).val()){
alert('field is empty')
$(this).css("background", "#FFFFEC");
}
return result;
});
This
if(!$(this).val())
is probably not working because it is being called on keyup
$('.url').keyup(function(){
Therefore, there will always be something in the input, as a key stroke is needed to fire keyup and it will never evaluate as empty.
EDIT
As per the comment
What's the solution?
If you want to check if the field is empty, do the check on focusout.
Here is your updated code:
$('.url').focusout(function(){
if(!$(this).val()){
alert('field is empty')
$(this).css("background", "#FFFFEC");
}
});
And your fiddle updated: http://jsfiddle.net/gp9nL/4/
Related
<form action="http://www.google.com/">
<textarea name="text"></textarea>
<input type="submit" name="review" value="Review" />
</form>
This is my basic form I am trying to replicate the stackoverflow review your question feature with.
To do this I am using the following jQuery:
$(function(){
let hasUserReviewedTheForm = false;
$('form').submit(function(){
if(!hasUserReviewedTheForm) { // Review the form
$('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300); // anchor
hasUserReviewedTheForm = true; // Has clicked Once
return false; // Cancel form action
} else {
// Submit the form
}
});
});
Being inside of the submit function, the else statement would not be a place to change the text. So I tried placing the if condition around the function, which made the submit never return true.
I then tried creating a separate if condition outside of the function like so:
$(function() {
let hasUserReviewedTheForm = false;
if(hasUserReviewedTheForm) {
$('input.review').val('Submit');
}
$('form').submit(function(){
if(!hasUserReviewedTheForm) { // Review the form
$('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300);
hasUserReviewedTheForm = true;
return false; // return false to cancel form action
} else { // Submit the form
}
});
});
That also had no effect, I'm not sure where to go with this.
How can I change the value of my submit after it has been clicked?
This is now a fully functional demo for anyone referencing the same thing here on CodePen
Use this after changing the value of the boolean variable:-
$('input[name=review]').prop('value', 'Submit');
Your selector is not working because that's not the correct way to access an input by name attribute.
I tried the above selector in your Codepen and it is working perfectly.
You can target your input by name using $('input[name=review]') then to change the value use .val('Submit')
A full example based on the code provided would look like:
$(function(){
let hasUserReviewedTheForm = false;
$('form').submit(function(){
if(!hasUserReviewedTheForm) { // Review the form
// anchor
$('html, body').animate({scrollTop : $(".Anchor").offset().top}, 300);
hasUserReviewedTheForm = true;
$('input[name=review]').val('Submit'); // Replace button value
return false; // return false to cancel form action
} else { // Submit the form
}
});
});
i got a input field and a button
<input required id="solution" name="solution" type="text" placeholder=""class="form-control input-md">
<button style="background-color:#da251d;" id="sendForm" name="sendForm" class="btn btn-success">Send</button>
Now i want to check the input Field for an value, when the value is incorrect, the button should be disbaled, i try it with js like this
$(document).ready(function(){
$(“#solution”).keyup(function(){
if($(this).val() == ‘value’) {
$(‘#sendForm’).attr(‘disabled’,‘disabled);
}
else {
$(‘#sendForm’).removeattr(‘disabled’);
}
});
});
But it dont work, can you help me pls?
i think you did the typo error on .removeAttr
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == "value") {
$("#sendForm").attr("disabled","disabled");
}
else {
$("#sendForm").removeAttr("disabled");
}
});
});
You should try to use the "change" or the "input" event. It would look similar to
$('#solution').on('change', function(){
// validation & toggle button state
})
For further event documentations:
change
Easy one!
The code does not work since you're using quotation marks (”) but what you should be using are the String marks (" or ').
The working code:
$(document).ready(function(){
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled', 'disabled');
}
else {
$('#sendForm').removeAttr('disabled');
}
});
});
Jsbin
Hey this is working fine ,
$("#solution").keyup(function(){
if($(this).val() == 'value') {
$('#sendForm').attr('disabled',false);
}
else {
$('#sendForm').attr('disabled',true);
}
});
You can use attr method for setting disabled property as true or false as per your need.
demo
Hello i am using two checkbox with the each loop and using javascript i want to change the value of the checkbox.
The checkbox value getting set false with the use of javascript.but after clicking it it getting set to true but check sign is dot getting displayed on the checkbox.
here is the javascript code:
$(".sp-modal-content a.btn-icon").each(function(){
console.log($(this));
$(this).click(function(){
($(this).attr('id'));
console.log($(this).find('input[type="checkbox"]').val());
if($(this).find('input[type="checkbox"]').is(":checked"))
{
alert("true");
$(this).find('input[type="checkbox"]').attr('checked',false);
}
else {
alert("false");
alert($(this).find('input[type="checkbox"]').val());
$(this).find('input[type="checkbox"]').attr("checked" ,"checked");
}
})
})
Using prop in place of attr might solve the problem
$(".sp-modal-content a.btn-icon").each(function(){
console.log($(this));
$(this).click(function(){
($(this).attr('id'));
console.log($(this).find('input[type="checkbox"]').val());
if($(this).find('input[type="checkbox"]').is(":checked"))
{
alert("true");
$(this).find('input[type="checkbox"]').prop('checked',false);
}
else {
alert("false");
alert($(this).find('input[type="checkbox"]').val());
$(this).find('input[type="checkbox"]').prop("checked" ,true);
}
})
})
And also I guess you are trying to toggle the checkbox on click
This might be shorter way. I haven't tested it though.
$(".sp-modal-content a.btn-icon").each(function(){
$(this).click(function(){
element = $(this).find('input[type="checkbox"]')
previousValue = element.attr('checked')
element.prop('checked', !previousValue)
})
})
In a textbox first character should not be number. So I have following code for this :-
DEMO
$('#FieldName').keyup(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});
The above code works but not when typed fast. Try typing fast numbers in the fiddle. It will accept numbers.
What is solution for this?
Try this one. Only takes the first letter of typed text with slice(0,1): and validates.
$('#FieldName').keyup(function(e) {
if ($.isNumeric($(this).val().slice(0, 1))) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="FieldName" />
Simple solution with RegEx
$(function() {
$('.notFirst').on('input', function() {
this.value = this.value.replace(/^(\d+)/, '');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="notFirst" />
$('#FieldName').keypress(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
e.preventDefault();
alert('First letter should not be Numeric.!');
}
});
Add e.preventDefault() inside your function.
Demo:
http://jsfiddle.net/b653oo8c/
Since the problem is when the person types fast, I assume it is a performance issue.
To fix it, you can do like this:
$('#FieldName').keydown(function(){
if(this.value.length==1 && this.value<<0==this.value)
{
this.value='';
alert('First letter should not be Numeric.!');
}
});
Your code should run AS FAST AS POSSIBLE inside the event handler!
Using jQuery, you only slow down your code.
Not caching $(this) slows down even more!
I use jQuery just to combat the cross-browser issues, and use the sugested keydown event.
One could use this, and would work just fine:
document.getElementById('FieldName').onkeydown=function(){
if(this.value.length==1 && this.value<<0==this.value)
{
this.value='';
alert('First letter should not be Numeric.!');
}
}
According to #Kaiido, it is a problem when checking the length when the keyup event fires.
If we keep the performance in sight, we could just get rid of the length check:
document.getElementById('FieldName').onkeydown=function(){
if(this.value.charAt(0)+1)//if it is a number, it will add 1, making it check as true
{
this.value='';
alert('First letter should not be Numeric.!');
}
});
Change the keyup() event to keydown(). This should help.
$('#FieldName').keydown(function (e) {
if ($(this).val().length === 1 && $.isNumeric($(this).val())) {
$(this).val('');
alert('First letter should not be Numeric.!');
}
});
this is my js fiddle link :
http://jsfiddle.net/m4tyC/
i have multiple select tags and i want to validate on submit if for example
at least if one of the size1 and color1 and Qty1 is selected in the first group and if one is selected i want to validate the others and in the same time if at least one group is selected the form can submit and if the user selected one option from the second group i do the same validation type for the second group of size2 , color2 , ...
i appreciate any help with that , i use jquery in my project
Try this (form will submit only when at least one row is completely selected)
$(function(){
$('#frm_productOrder').on('submit', function(e){
e.preventDefault();
var f=$(this);
var invalid=false, selected=0;
$('.selects').each(function(){
var row=$(this);
var items=0;
$('select', row).each(function(){
var t=$(this);
var selectedIndex=t.prop("selectedIndex");
if(selectedIndex) items++;
});
if(items==3) selected++;
if(items>0 && items<3) invalid=true;
items=0;
});
if(selected>0 && !invalid) f[0].submit();
else alert('Please fill up the form correctly');
});
});
DEMO.
Here is some JQuery code. You can figure out how to submit the form on success by yourself:
$(document).ready(function(){
$("form").submit(function(event)
{
var is_valid = true;// for avoiding alerting in loop
event.preventDefault();
$(this).find("select").each(function(){ //usually default is the first
if(!$(this).attr("selected"))
{
$("#"+$(this).attr("id")).each(function()
{
if($(this).find("option:first").attr("selected"))
{
is_valid = false;
}
});
}
});
if( !is_valid )
alert("Please make sure all values are set for row!");
});
});
See this jsFiddle. There are some bugs too, but you can work that out.