Can someone help me please, I want to show an error when the user makes an invalid input with jquery.
It works if the input is null, but does not work with RegEx.
Here is the html code :
<div class="error" style="padding:5px 10px;background-color:yellow;border:1px solid red;border-radius:5px;display:none"></div>
<input type="text" name="nama">
<input type="submit" name="submit" value="Cek">
And here the jQuery
$(document).ready(function () {
var justChar = /^[a-zA-Z]+$/;
$('input[name="submit"]').click(function () {
if ($('input[name="nama"]').val() === "") {
$('.error').html('<ol></ol>');
if ($('input[name="nama"]').val() === "") {
$('.error ol').append("<li>Name Must Be Require</li>");
} else if (!justChar.test($('input[name="nama"]').val())) {
$('.error ol').append("<li>Name Must Be Character</li>");
}
$('.error').slideDown('slow');
return false;
}
return true;
});
});
i've write in jsfiddle
Remove the parent condition if ($('input[name="nama"]').val() === "") as it is nonsense if you want to analyse your input value.
And for matching the regex, use the jQuery style method: $('input[name="nama"]').val().match(justChar);
Your regex check is misplaced, it is under the condition if ($('input[name="nama"]').val() === "") So the regex will never be checked
I got this working:
$(document).ready(function(){
var justChar = /^[a-zA-Z]+$/;
$('input[name="submit"]').click(function(){
if($('input[name="nama"]').val() === "") {
$('.error').html('<ol></ol>');
$('.error ol').append("<li>Name Must Be Require</li>");
$('.error').slideDown('slow');
return false;
} else if(!justChar.test($('input[name="nama"]').val())) {
$('.error').html('<ol></ol>');
$('.error ol').append("<li>Name Must Be Character</li>");
$('.error').slideDown('slow');
return false;
} else {
return true;
}
});
});
Your inner condition is checked only if the value is empty.
If it is not empty then your inner condition check is not even made. see outer check -
if ($('input[name="nama"]').val() === "") {
update: Also, better to use the JQuery match as #Valentin Mercier has suggested. That's a good one
Remove the above line and your errors show up properly
Edit:
Showing the modified code for more clarity to the OP
$(document).ready(function () {
var justChar = /^[a-zA-Z]+$/;
$('input[name="submit"]').click(function () {
if ($('input[name="nama"]').val() === "") {
$('.error').html('<ol></ol>');
$('.error ol').append("<li>Name Must Be Require</li>");
$('.error').slideDown('slow');
return false;
} else if (!$('input[name="nama"]').val().match(justChar)) {
$('.error').html('<ol></ol>');
$('.error ol').append("<li>Name Must Be Character</li>");
$('.error').slideDown('slow');
return false;
} else {
$('.error').hide();
return true;
}
});
});
Edit: Sharing the jsfiddle as the OP has still no idea! . Hope it helps!
http://jsfiddle.net/PrasanthSudarsanan/tLmD7/2/
Related
I have the code below, the form is needed to be validated before it can submit the form.
But the problem is, the form continues to submit without validating.
<form action='#' method='post' onsubmit='return validate();'>
function validate()
{
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
}
});
});
How to handle the return of a loop?
Dont submit the form once encountered return false on the loop.
try this:
function validate()
{
var passes = true;
$('form').find(':input:not(:submit,:hidden), select, textarea').each(function(e)
{
$(this).removeClass('redBox');
var rq = $(this).attr('requiredz');
if(rq != undefined)
{
if($(this).val().trim() == '')
{
$(this).addClass('redBox');
$("#errorMsg").html('Red boxes cannont be left empty!');
passes = false;
}
}
});
return passes;
});
Do not use return.
$('#my-form').on('submit', function(event){
if (validate() === false) {
event.preventDefault(); // like return false;
}
});
For more information see jQuery submit docs.
Each function has it's own returned value, the default returned value is an undefined value. You should check the length of the invalid elements after the each loop and return a proper value, since you are using jQuery I'd suggest:
$('form').on('submit', function (event)
{
var $invalid = $(this)
.find(':input:not(:submit,:hidden), select, textarea')
.removeClass('redBox')
.addClass(function () {
return this.getAttribute('requiredz')
&& $.trim(this.value) === ''
? 'redBox'
: null;
}).filter('.redBox');
if ($invalid.length)
{
$("#errorMsg").html('Red boxes cannont be left empty!');
return false;
}
});
I need to deny initial spaces on my input (which is not in a form), I have code like this:
<input id="customer-name" class="required no-spaces" minlength="3" />
And this is my javascript function:
$(".no-spaces").on('keypress', function(e) {
if (e.which == 32) {
return false;
}
});
But this doesn't allow spaces in any part of the input. How to do it just before any text?
Edit: The real is that I'm doing an autocomplete with the input and, If i allow initial spaces it will return all data.
Verify if the string is empty beforehand.
$(".no-spaces").on('keypress', function(e) {
if ($(this).val() == "" && e.which == 32) {
return false;
}
});
Also, check this in order to prevent the case where the user selects the entire text and then presses space and this to check if the cursor is indeed at the beggining of the input (Thanks to Barmar for mentioning this specific case)
Just simply check there is another character on textbox.
$(".no-spaces").on('keypress', function(e) {
if (e.which == 32 && ($this).val() == '') {
return false;
}
});
Edit
I hope it might be work.
$(".no-spaces").on('keypress', function(e) {
$(this).val(function(i, v) {
if (v[0] == ' ') {
return v.slice(1, v.length);
};
return v;
});
});
$(".no-spaces").on('keypress', function(e) {
if (e.which == 32) {
$(this).val($(this).val().replace(/^\W*/, ''));
}
});
This works for me.
$(".no-spaces").on('keypress', function(e) {
var val = $(this).val();
val_ltrim = ltrim(val);
$(this).val(val_ltrim);
});
Greetings.
I have many forms generated dynamically via PHP. I'm trying to verify that all the fields on the one form that's going to be submitted are filled. I'm just starting to JQuery, so I'm sorry if the answer is stupidly easy.
I tried this:
$('.myform').submit(function(){
var flag = true;
$('.myform input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
But when in the second form, it goes and checks the first one (which should be empty because you're not filling that one...)
Thanks in advance!
$('.myform').submit(function(){
var flag = true;
// use $(this) below which is the form has submit event fired.
$(this).find('input').each(function() {
if($(this).val() === ''){
flag = false;
return false;
}
});
return flag;
});
Or you could simplify your code by:
$('.myform').submit(function() {
return $(this).find('input').filter(function() {
return $.trim($(this).val()) !== '';
}).length == 0;
});
Hands up - I can't figure it out what's wrong with it. Is that a bug or a wrong code ?
$(document).ready(function() {
$("#rem_but").click(function(){
var mail_name = $("#mail_rem").val();
var dataString = 'mail_name='+ mail_name;
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").removeAttr("disabled"); };
}); });
So when there's no input the button returns false correctly - when there's an input in the field - still the button returns false, hence the removeAttr() doesn't work - why ? Regards.
try (mail_name.val() == "") change to (mail_name == "")
Are you using jQuery 1.6.x?
If so then you should try using the .prop() function. See below:
Disable/enable an input with jQuery?
Also, in your if statement no need to keep selecting $("#rem_but"). Based on your code I would recommend $(this) instead -
$(this).prop('disabled', true);
This should work -
$(document).ready(function() {
$("#rem_but").click(function(e) {
e.preventDefault();
var mail_name = $.trim($("#mail_rem").val());
var dataString = 'mail_name='+ mail_name;
if (mail_name === "") {
$(this).prop("disabled", true); }
else {
$(this).prop("disabled", false); }
});
});
Here is the working jsFiddle code -
http://jsfiddle.net/4rPc5/
Updated code -
http://jsfiddle.net/4rPc5/2/
Perhaps you need to set the disabled attribute to 'false'?
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",false); };
}
Or set it to an empty string
if (mail_name.val() == "") { $("#rem_but").attr("disabled",true); }
else { $("#rem_but").attr("disabled",""); };
}
$(document).ready(function () {
$("#btnhighlight").click(function () {
var htext = $("#txthighlighttext").val();
if (htext == '') {
alert("Pleae enter the search item.");
return false;
}
$("#lstCodelist option").each(function () {
$(this).removeClass('searchItem');
if ($(this).text().search(htext) != -1) {
$(this).addClass('searchItem');
}
});
});
});
Lets take I have a row something like this
I love to work with Jquery.
If I enter my search text as jquery its not highlighting Jquery. But my query should work in both they way regardless of CAPS or SMALL letters.
how to change my code to work like that.
thanks for your all help.
use .toUpperCase() ............. // or lowerCase
if ($(this).text().toUpperCase().indexOf(htext.toUpperCase()) != -1) {
This one should work, I believe:
$(document).ready(function () {
$("#btnhighlight").click(function() {
var htext = $("#txthighlighttext").val().toLowerCase();
if (htext === '') {
alert("Please enter the search item.");
return false;
}
$("#lstCodelist option").each(function() {
var $this = $(this);
if ($this.text().toLowerCase().indexOf(htext) !== -1) {
$this.addClass('searchItem');
} else {
$this.removeClass('searchItem');
}
});
});
});
Sidenote: indexOf is proven to be faster than search.