how to validate a textarea using javascript - javascript

I want to check a textarea whether it is empty or not. For this I write the following code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}​
For the first time it is working fine. But If I remove the text from the textarea the above function is returning true value i.e., it is assuming the previous text I've entered into the textbox. Can anybody kindly tell me where is the problem?

I am getting it correctly. This is what I did.
Click on validate, it said Please Write Problem Description.
Write something and click. Nothing happened.
Remove the text. Click on validate, it said Please Write Problem Description.
Note: Use a trim function to eliminate empty spaces.
Code:
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if ($.trim(problem_desc.value) == '') {
alert("Please Write Problem Description");
return false;
} else {
return true;
}
}
Demo: http://jsfiddle.net/TZGPM/1/ (Checks for Whitespaces too!)

Do check for white space in the value like this
if (problem_desc.value.match (/\S/)) { ... }
or other way check for length
problem_desc.value.length == 0;

Remove spaces and calculate length of the value attribute.
function validateForm(theForm) {
var problem_desc = document.getElementById("problem_desc");
if (problem_desc.value.replace(/ /g,'').length) {
return true;
} else {
alert("Please Write Problem Description");
return false;
}
}
<textarea id="problem_desc"></textarea>
<button onclick="validateForm()">Validate</button>

Related

jquery - Check specific inputs for empty value and add class to ONLY those inputs that are empty

I have form that has input fields that are required, I point this out with made up class name.
I have piece of code that kind of works. If I focus on required input and then press submit, that input will become red, if empty (which I want). But it only works only on one at a time and if I have focus on the input.
My code is as follows:
function checkIfEmpty(){
$('#register-form input.gv-form-required').blur(function(){
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
return false;
}else{
return true;
}
});
}
I am almost certain that the blur() method is not suitable for my situation.
So help a man out here, please.
Try this : You have to use .each() to check every input inside form and put removeClass in else condition.
function checkIfEmpty(){
var empty = false;
$('#register-form input.gv-form-required').each(function(){
if($(this).val().trim()==""){
empty = true;
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
return empty;
}
The blur event indeed doesn't seem right in your situation. What I would do is that I would itterate through each field and checked whether it is filled or not. If it is, remove (if any) has-error class. If it isn't filled, give it the has-error class
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if($(this).val() === ""){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
change your code to the following:
function checkIfEmpty(){
$('#register-form input.gv-form-required').each(function(){
if( !$(this).is(':empty')){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}
});
}
try
in else condition
$(this).parent().parent().removeClass("has-error");
js code
if( !$(this).val()){
$(this).parent().parent().addClass("has-error");
}else{
$(this).parent().parent().removeClass("has-error");
}

Enabled and Disabled submit button when multiple fields are empty isn't working

I have here script for Enabled and Disabled submit button. I tried to use each function but isn't working. Every fields had it's value from database. The process should not allowed to submit if one of the fields was empty. Every fields has a value because I used it for editing window. Any help will appreciate. Thanks..
And this my fiddle http://jsfiddle.net/cj6v8/
$(document).ready(function () {
var saveButton = $("#save");
var empty = true;
$('input[type="text"]').change(function () {
$('.inputs').each(function () {
if ($(this).val() != "") {
empty = false;
} else {
empty = true;
}
});
if (!empty) {
saveButton.prop("disabled", false);
} else {
saveButton.prop("disabled", true);
}
});
}); // END OF DOCUMENT READY
The problem is the first else statement.
When $('.inputs').each(... iterates through your fields the empty variable is re-assigned a new value for every input field. In other words, the way you did it, only the last field was significant. (To test it, try this: leave the last one empty, and the button will be disabled, no matter what you put in the first two fields.)
Instead, try initializing empty at false just before the loop (you assume your fields are all filled with something), and then, when you iterate, as soon as you come across an empty field, set empty to true.
var empty = false;
$('.inputs').each(function() {
if($(this).val() == "")
empty = true;
});
As you can see, I removed the problematic else.
you need to init empty to false and cange it only if you find empty inputs inside to loop. http://jsfiddle.net/cj6v8/1/
If you don't want to submit when at least one field is empty you'll need to do this:
....
var empty = true;
$('input[type="text"]').change(function () {
empty = false;
$('.inputs').each(function () {
if ($(this).val() == "") {
empty = true;
break;
}
}
...
each is asynchronous, http://jsfiddle.net/cj6v8/4/
$(document).ready(function() {
var saveButton = $("#save");
$('input[type="text"]').change(function() {
var empty = true;
var inputs = $('.inputs');
inputs.each(function(i) {
if ($(this).val().length == 0) {
console.log($(this).val());
empty = false;
}
if (i === inputs.length-1) saveButton.attr("disabled", !empty);
});
});
});// END OF DOCUMENT READY

jQuery replace invalid character

I have input (type=password) and I restrict this input only for some characters. Code is here
$(document).ready(function() {
$('#nguestpass, #nguestps, #nuserpass, #nuserps, #nadminpass, #nadminps').bind('keyup').bind('keyup', function(){
new_char = $(this).val();
if (/[^a-zA-Z0-9\!\#\#\%\*\(\)_\-\+\=\[\]\:\;\'\,\.\?/]/.test( new_char ) === true ) {
alert('Entred character is not allowed. Please correct it.');
return false;
}
return true;
});
});
If I paste invalid code (example "ř") get alert (Entered....). It is correct. If I want to enter next characters I get alert again.
I think that is nasty for user. Better modification (according me) - if I entered invalid characters I get alert - confirm OK and invalid character will be remove.
Can any idea what do it? Thanks
P.s.: Sorry for my english.
Try this to remove the last character:
$(this).val($(this).val().substring(0,$(this).val().length-1));
and put this before your return false;
This should do what you're expecting:
$(function () { // Same as document ready, just shorter.
// Try to replace all these IDs with a common class you can put on every input.
// If you're using a not-so-old version of jQuery, use .on() instead of .bind().
$('#nguestpass, #nguestps, #nuserpass, #nuserps, #nadminpass, #nadminps').on('keyup', function () {
var new_char = $(this).val();
if (/[^a-zA-Z0-9\!\#\#\%\*\(\)_\-\+\=\[\]\:\;\'\,\.\?/]/.test(new_char) === true) {
alert('Entred character is not allowed. Please correct it.');
$(this).val(new_char.substring(0, new_char.length - 1));
return false;
}
return true;
});
});
Demo
There is quite a few mistake in your code (bind called once without listener, new_char is a global variable) and nothing to actually clear the invalid value which is what should happen when a password is wrong.
Try this.
$(function() {
$('#nguestpass, #nguestps, #nuserpass, #nuserps, #nadminpass, #nadminps').bind('keyup', function(){
var new_char = $(this).val();
if (/[^a-zA-Z0-9\!\#\#\%\*\(\)_\-\+\=\[\]\:\;\'\,\.\?/]/.test( new_char ) === true ) {
alert('Entred character is not allowed. Please correct it.');
// reset value
$(this).val("");
return false;
}
});
});

javascript onchange checkboxes still select on cancel

<script>
function no_email_confirm() {
if (document.getElementsByName("no_email")[0].checked == false) {
return true;
} else {
var box= confirm("Sure?");
if (box==true)
return true;
else
document.getElementsByName("no_email")[0].checked == false;
}
}
</script>
And here is my HTML for the checkbox:
<input type="checkbox" id="no_email" name="no_email" onchange="no_email_confirm()"></input>
For some reason, this gives me the confirm pop up the first time I check the box, but not for any click after that. Also, even if I click "Cancel" it still checks the check box. I've searched on here and for some reason, no matter what I try, I can't get it to work properly.
It should confirm if they really want to check the box, if they select "Yes" then it checks it, if not, then it doesn't check it. I can get it to work without the name no_email, but I can't change that..
Anyone have any ideas?
Looks like you've got several errors in there, most notably using == when you probably meant =. Instead, add an event listener and make sure the assignment works:
var box = document.querySelector('#no_email');
box.addEventListener('change', function no_email_confirm() {
if (this.checked == false) {
return true;
} else {
var confirmation= confirm("This means that the VENDOR will NOT RECEIVE ANY communication!!!!");
if (confirmation)
return true;
else
box.checked = false;
}
});
http://jsfiddle.net/A3VGg/1/

Check if input field is empty on fields with jQuery

I have a form with 5 fields all with the class 'required'
Im trying to ensure that on submit these fields arent empty, if they are, add a class, if not, return true - ive tried the following only with no luck, even if the fields are empty the form still submits.
$('.submit').click(function(){
if($('.required').val() == "") {
$('.required').addClass('error');
return false;
} else {
return true;
};
});
Try:
$('.submit').click(function(e){
if(!$('.required').val()) {
$('.required').addClass('error');
e.preventDefault();
} else {
return true;
};
});
Try this:
$('.submit').click(function() {
$('.required').removeClass('error').filter(function() {
return !$.trim(this.value).length;
}).addClass('error');
});
Class error is added to empty fields only and is removed otherwise.
http://jsfiddle.net/dfsq/2HxaF/
Another variation which can be useful for your task: additional validation on fields blur:
$('.submit').click(validate);
$(document).on('blur', '.required', function() {
validate($(this));
});
function validate($field) {
($field instanceof jQuery && $field || $('.required')).removeClass('error').filter(function() {
return !$.trim(this.value).length;
}).addClass('error');
}
http://jsfiddle.net/dfsq/2HxaF/1/
if($('.required') will return a collection of jQuery objects, while the call to .val() will only use the first element of that collection to perform your test.
try something like this (EDIT: don't need to do a loop or test, since filter expr will take care of that for you):
$('.submit').click(function(e) {
var ins = $('input.required[value=""]');
ins.addClass('error');
return false;
}
return true;
}
You should use filter to get the empty fields. The form submit is also better to use so that it will handle enter key presses too. If not then you will have to handle the enter key presses inside the form that will trigger the submit event of the form
$('yourform').submit(function(){
// empty will contain all elements that have empty value
var empty = $('.required').filter(function(){
return $.trim(this.value).length === 0;
});
if(empty.length){
empty.addClass('error');
return false;
}
});
A little late to the party but I think this is the best solution:
Replace ALL required fields that weren't filled:
http://jsfiddle.net/LREAh/
$('form').submit(function(){
if(!$('.required').val()) {
$('.required').attr('placeholder', 'You forgot this one');
return false;
} else {
return true;
};
});
Replace only the required field of the submitted form: http://jsfiddle.net/MGf9g/
$('form').submit(function(){
if(!$(this).find('.required').val()) {
$(this).find('.required').attr('placeholder', 'You forgot this one');
return false;
} else {
return true;
}
});
Of course you can change attr('placeholder', 'You forgot this one'); for addClass('error'); -- it was only for demonstration. You don't need the id="formX" on the html btw, I was just trying something else out and forgot to remove.

Categories

Resources