jQuery outline textfield to show error - javascript

I have a textfield and at the moment i disable the submit button when the textfield does not hold three charactes. What i want to do now is also outline the textfield bold red and still have the submit button disabled, however i cannot seem to be able to outline the textfield and disable the submit button at the same time.
my code for disabling the submit button is as follows is it possible to be able to outline the textfield when the length is < 3 in this function to?
thankfull for any help
$(function() {
$('input[name="updateMessage"]').attr('disabled','disabled');
$('input[name="selectMessageForUpdate"]').keyup(function(){
if($('input[name="selectMessageForUpdate"]').val().length < 3)
{
$('input[name="updateMessage"]').attr('disabled','disabled');
}
else
{
$('input[name="updateMessage"]').removeAttr('disabled');
}
});
});

He wants to style the textarea, not the submit button. Just add a class to your textarea with the specified markup and remove it when the input is valid. Also check if the input is more than just whitespace.
$(function() {
$('input[name=updateMessage]').attr('disabled','disabled');
$('input[name=selectMessageForUpdate]').keyup(function(){
if($('input[name=selectMessageForUpdate]').val().length < 3)
{
$('input[name=updateMessage]').attr('disabled','disabled');
$('input[name=selectMessageForUpdate]').addClass('someClass');
}
else
{
$('input[name="updateMessage"]').removeAttr('disabled');
$('input[name=selectMessageForUpdate]').removeClass('someClass');
}
});
});

Add to your css:
input.indicated_textfield { border: 2px solid red; }
Add the addClass and removeClass lines to your Javascript code:
$(function() {
$('input[name="updateMessage"]').prop('disabled', true);
$('input[name="selectMessageForUpdate"]').keyup(function(){
if($('input[name="selectMessageForUpdate"]').val().length < 3)
{
$('input[name="updateMessage"]').prop('disabled', true);
$('input[name="selectMessageForUpdate"]').addClass('indicated_textfield');
}
else
{
$('input[name="updateMessage"]').prop('disabled', false);
$('input[name="selectMessageForUpdate"]').removeClass('indicated_textfield');
}
});
});

Add the border css property along with attr('disabled')
Add a class to define the red border, in your css:
textarea[name=selectMessageForUpdate].disabled { border:5px solid red }
your js:
$(function() {
$('input[name="updateMessage"]').attr('disabled','disabled');
$('textarea[name="selectMessageForUpdate"]').keyup(function(){
if($(this).val().length < 3)
{
$('input[name="updateMessage"]').attr('disabled','disabled');
$(this).addClass('disabled'); // ADD THIS
}
else
{
$('input[name="updateMessage"]').removeAttr('disabled');
$(this).removeClass('disabled'); // ADD THIS
}
});
});
I created a js fiddle and it seems to work...
http://jsfiddle.net/tmjaF/8/

Related

Re-validate field after changing input

We are using HTML form validation (and we explicitly do NOT want do use jQuery validate plugin...). Currently I am able to mark invalid/empty fields after Submit. I do it this way:
if(document.addEventListener){
document.addEventListener('invalid', function(e){
e.target.className += ' invalid';
}, true);
}
But the marking remains after the user enters information to a field. How can I remove the className, let's say, onBlur?
Maybe I can just add the following CSS classes:
input:invalid:focus,
input.invalid{
border: solid 1px #f00; /* red border */
}
input:valid {
border: 1px solid #ced4da; /* reset to default border color */
}
At least this seems to work.
Are there any smarter solutions?
Add to the blur event within the invalid event handler like so:
document.addEventListener("invalid", function(e) {
const oldClassName = e.target.className;
e.target.className += "-invalid";
e.target.addEventListener("blur", function(e) {
e.target.className = oldClassName;
}, { once: true });
});
The { once: true } option at the end ensures that the event listener gets taken off once the blur happens.
The browser automatically adds/removes the :invalid pseudo selector for you https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid, just style the form fields as you would for the regular case (not invalid) and invalid case (using the :invalid selector)

Change background image width with checkbox?

I have simple Chrome extension that injects some html into a game webpage that lets a user customize the background image of the webpage. It stores the URL of the image with setlocalstorage so that when they return to the game the custom background image is still there. I've included some CSS that forces the image to fit the width of the browser window. This satisfies most users but, there are a few that have requested I allow them to turn off the width-matching feature. What I'd like to do is add a check box to allow the user to turn off the width adjustment.
I'm thinking some sort of "if the box is checked apply this class to the body tag" sort of thing but, I can't seem to figure it out.
If someone could show me how to accomplish this I'd really appreciate it!
Attach an onchange event listener to the checkbox that checks the value of 'checked' for your checkbox element and adds/removes the class:
yourCheckboxElement.addEventListener('change', function(e){
document.body.classList[this.checked ? "add" : "remove"]("someClass");
/* save value of this.checked to localStorage here */
});
jsFiddle example: http://jsfiddle.net/8RC2m/1/
Change css when checkbox is marked:
$("#new").click(function() {
if (this.checked){
$(this).closest('p').addClass('white');
} else {
$(this).closest('p').removeClass('white');
}
});
add styles:
.white {
color: white;
}
That might work for you, no?
Additionally,
$(":checkbox").attr("autocomplete", "on");
Wrap your width adjustment code in a css class like width-adjustment. Then try something like this:
if ($('#IdOfYourCheckBox').is(":checked") == true){
$("#ElementToChange").removeClass('width-adjustment');
}
You have requested JavaScript only so i will avoid jQuery, try something like this:
var b = document.getElementsByTagName("body")[0];
if (document.getElementById('checkbox-id').checked){
b.className +=" yourclass";
}
hope it helps
You can use this script to check if the chkbox is checked or not.
(function( $ ){
$.fn.check = function( handler ) {
if (handler) {
this.each(function() {
$(this).change(function() {
if ($(this).attr('checked')) {
handler.call(this);
$(this).closest('p').addClass('white');
}
});
});
} else {
this.each(function() {
$(this).attr('checked', true);
$(this).change();
$(this).closest('p').addClass('white');
});
}
};
$.fn.uncheck = function( handler ) {
if (handler) {
this.each(function() {
$(this).change(function() {
if (!$(this).attr('checked')) {
handler.call(this);
$(this).closest('p').removeClass('white');
}
});
});
} else {
this.each(function() {
$(this).attr('checked', false);
$(this).change();
$(this).closest('p').removeClass('white');
});
}
};
})( jQuery );

Jquery Change background color of DIV to #333 only when all checkbox is not checked

I have 5 div with class .thumb-folder and inside each contains a checkbox.
I also have another div with a class .alarm.
When 1 or many checkboxes is checked the div with .alarm class changes background to red.
How to change the div with the .alarm class to background #333 only when no checkboxes are checked?
Here is a link to jsfiddle of my current code.
Use the sam eselector you used to bind the handler to check if any checkboxes are checked.
$('.thumb-folder input:checkbox').on('click', function (e) {
if ($('.thumb-folder input:checkbox').is(':checked')) {
$('div.alarm').css("background-color","red");
}
else{
$('div.alarm').css("background-color","#333");
}
});
DEMO
You can use length to find the checked checkbox count using :checked
Live Demo
$('.thumb-folder input:checkbox').on('click', function (e) {
if ($('.thumb-folder :checked').length == 0)
$('div.alarm').css("background-color", "#333");
else
$('div.alarm').css("background-color", "red");
});
You can just do this in 3 lines:
$('.thumb-folder input:checkbox').on('click', function (e) {
$('div.alarm').css("background-color",(($("input[type='checkbox']:checked").length > 0) ? "red" : "#333"));
});

jQuery - Clear form field with .change event

I am using the following jQuery code to switch div displays based on a change event tied to 3 radio buttons:
(function ($) {
Drupal.behaviors.change_form_fields = {
attach: function(context, settings) {
$('div.form-item-payment-method input').each(function() {
if (this.value != 'existing-bill') {
$('div#' + this.value).css('display', 'none');
}
});
$('div.form-item-payment-method input').change(function() {
show_class = this.value;
$('div.form-item-payment-method input').each(function() {
if (this.value != show_class) {
$('input#edit-' + this.value).val('');
$('div#' + this.value).css('display', 'none');
} else {
$('div#' + this.value).css('display', 'block');
}
});
});
}
}
}(jQuery));
This works fine and dandy, but I want to add some more to it.
If a user selects a radio button, I want to blank/clear out the form fields in the other groups. Like the onload (.each), they have divs around the display content.
I tried using .attr and .val, but the form fields would not clear when selecting another radio button. What am I missing? jQuery 1.4x+
val('') should do the trick, so there must be some other issue with either the selector, or the code not being run.
Use the radio buttons change event that should help you.
$("input[type=radio][name=groupname]").change(function(){
//Code the clear the form fields or other logic here.
});

Radio - click action and length action

I have radios button on the page, when the page load, it will use length action to check and then hide/show some elements.
When user click on the radio, it will then hide and show some elements.
I'm wondering is this correct way doing it? Or how can it be improved?
$(document).ready(function() {
if ($(".delivery_type:radio").length > 0) {
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery").hide();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($('#methodDelivery').is(':checked')) {
$(".methodPickup").hide();
}
}
$(".delivery_type:radio").live('click', function() {
if ($(this).val() == "pickup") {
$(".methodDelivery").hide();
$(".methodPickup").show();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($(this).val() == "delivery") {
if ($(".selectAddressList").length == 0) {
$(".customAddress").show();
}
$(".methodDelivery").show();
$(".methodPickup").hide();
$("#addressBookSelectBlock").show();
}
});
});
You could combine all the hide() and show() functions together:
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery, #addressBookSelectBlock, .customAddress").hide();
}
// etc...
Also, I'm not sure why you are using live() unless the radio buttons are being dynamically added or removed; just use click() if they are not dynamic.
Sharing some HTML and a little more information might help with more suggestions.

Categories