I'm creating a form, and I'm validating it with JavaScript. The way it works now, is if a value is not correct, it displays an alert stating that you need to enter text. My question is, how can I change it so that instead of an alert, the text box will turn red, and something like: "This is required" will show next to the textbox. I think I can solve this with jQuery, but I was wondering if anyone had any suggestions. THANKS!
P.S. If you go to yahoo.com, click Sign Up, and click Create Account (without entering anything), you'll see what I'm aiming at.
You could create a CSS class with the following properties:
input.ERROR { border-color: red; }
Using jQuery, you can add this class to the input box with the incorrect value:
$("input[name=Address]").addClass("ERROR");
(assuming the input box with the name "Address" had the wrong value)
Well , I would use a jQuery Validation plugin which is at
http://bassistance.de/jquery-plugins/jquery-plugin-validation/
You just need to add the css class "required" to the elements that you need to be validated
Related
I'm using the jQuery Validator plugin 1.19.5 on a slightly large (but simple) form generated from a PDF by an online converter to html5
The form has a Submit button implemented as a button with onclick to a javascript function within the formviewer.js file that is part of the conversion to html5. If I open the form in Chrome 107.0.5304.107 Developer Tools, I can see that the Submit button goes to the following code that I added to the success branch of the function that handles the submit in formviewer.js:
success: function() {
const OSHform=$("form").eq(0);
if (OSHform.valid()) {
top.document.location.href = "/Adsentry/completed";
}
else {
alert("Fields did not validate, please fix errors and try again");
}
},
failure: function() {
alert("Form failed to submit, please try again")
}
In a separate script, I invoked validate() on the form element, passing it rules for the fields to validate.
var $j = jQuery;
var OSHform = $j("form");
OSHform.validate({
rules: {
"NAME OF DRIVER": "required",
"EMAIL": "required",
"EMAIL": "email",
"ADDRESS": "required"
}
});
If I omit required fields, or enter an invalid email address in an email field, the call to valid() returns false. And in fact, if I look at the input elements in the Elements tab, I can see that class="error" gets added, and if I correct the error it changes to class="valid". Additionally, with class="error", a label gets added for that element, also with class="error", and correcting the problem adds style="display:none;" to the label.
So everything is great, except that there is no text or message that goes with the label, so its presence/absence, or the presence/absence of display:none on it, has no effect on the normal display of the page.
I have tried stepping through the code in the debugger, but I'm afraid my javascript is so weak I can't really figure out what's going on to the extent of understanding why the messages are not being displayed.
You can play with it live here for the time being, but I can't promise to stop fiddling with it! There are currently only 3 required fields: Name of driver, Address, and Email. If they are all correct, the form submits as intended.
A little disappointed that this didn't even get any comments, let alone answers. On the other hand, it turned out the answer was exactly as anyone even slightly more experienced than me would likely have guessed: errors were being reported in HTML elements, but there was no CSS to put them in the right location on the page. The plugin seemed to be buggy in failing to produce default message text describing the errors; instead, it just produced message text that was simply the name attribute of the erroneous input element. But without appropriate CSS, that name attribute was output in the black strip at the bottom of the page, making it essentially invisible. It took a sharp eye to notice the sudden appearance of "fly specs" at the bottom of the page when clicking the submit button.
The plugin just inserts an HTML element into the DOM immediately following the bad input element. But the files generated from the PDF include a style sheet with selectors using the ID of each input element to give the input element absolute placement on the page. And simply inserting an element into the DOM as the next sibling of the input element, without a style, results in having it rendered at the bottom of the page. Even when I figured out that the lack of CSS was the problem, it took me a while to get something that worked: good old selector specificity in action. All of the input elements were placed using ID selectors with absolute position, and I could find no way to have the simple next-sibling relationship of the message to the input element cause the message to be rendered immediately after the input element. Although it made me feel "icky" to do it, the solution I came up with was to use jQuery to iterate over all the message elements with the "error" class, get the ID of the input element it was reporting, and then use $.css() to get the input element's effective top, left, and width style attributes. Then strip off the trailing "px", multiply by 1 to get a numeric value, add the width to the left numeric value, and specify new top and left attributes using $.css() on the message elements. This put the messages I defined in the messages sub-object of the object passed to the validate constructor appear in the right locations. It only remains a mystery why the default messages didn't appear instead of the names of the input elements for elements that were invalid.
I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!
I am having a jsp/html page.This page is accessed from two different links.
It is Menu1-->demo.html page and from Menu2-->demo.html page(In my case its jsp)
In the demo.html page I am having a text box which is disabled by default.
<input class="mytextinputtextField" type="text" id="countryOfOrigin"
readonly style="background-color:#DCDCDC" />
Now when the demo.html page is accessed from Menu2 , I am checking it using a hidden parameter and again enabling the text box and setting the focus on the text box.
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
}
The field is enable and the cursor is visible but if I type the text is not typed in the text box.
I need to click on the text box to enter the text.
I think it is because of the disabled and again enabling the field .
Please can any one help me to be able to type in the text box on the focus event from javascript.
I am not using JQuery and the browser is I.E 6
Try this :
document.getElementById("countryOfOrigin").removeAttribute('readOnly');
jQuery version :
jQuery('#countryOfOrigin').removeAttr('readOnly');
Have you tried removing the attribute?
document.getElementById("countryOfOrigin").Attributes.Remove("readonly");
or
document.getElementById("countryOfOrigin").removeAttribute("readonly");
Thank you for your help.
I hav found solution or may say work around.
I am pasting the code which may be useful for others
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
document.getElementById("countryOfOrigin").select();
}
Here is an unofficial solution, we have to use the setTimeout() function to delay the focus() execute time.
setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/
As I'm not that familiar with JavaScript, I did some research around the web to have sth. to go on, but was not able to solve my problem.
I created a fiddle to show you how it shall look like.
Well, my problem is that the light-grey pre-filled value "E-Mail" shall not be deletable, but the value itself shall be extendable in black font color.
Have you got an idea how to make it happen?
Thank you.
try this
http://jsfiddle.net/wf9zX/2/
use lable for that input field and concat input field value and lable text
Solution 1
Why wouldn't you use two inputs styled differently ? You can disable or make the first one readonly and still concat both input POST values.
I don't think styling INSIDE an input is very W3C friendly.
Solution 2
Use a background image (an image where "E-mail" is written) in your input with some padding-left. The when you get the POSt value, just add the string "E-mail" to it. It's like they do cutom search button icons on inputs.
See the new fiddle: http://jsfiddle.net/gxY5P/4/
Hope this helps.
When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)
Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.
I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.