I'm working on making client side validation for inputs.
I had had been using PHP to do it all.
Needless to say things got cluttered very quickly.
So I looked in to JS and HTML5 and want to move in to that system for validation.
The messages I want to show are like this:
I know that these are done with the the <input type="email"> tag.
After some help, I was pointed to this page html5rocks.
However I cant seem to get anything to popup.
I copied code straight from there site and nothing.
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
What am I missing to make the notification appear?
That popup is a new implementation in HTML5. Just create an input field like this:
<input type="email">
The popup appears automatically when the form is submitted if the input isn't an email-address.
More about the new input fields in HTML5 is at W3Schools.
Form must be submitted before validation kicks in.
So you have to add a button with the type of submit so like so:
<input type="submit" value="blah">
And then you have to enclose all the fields/inputs in a <form> and </form> tag.
here is the working code:
<form>
<input id="foo" type="number" max="2" value="1" />
<input id="bar" type="number" max="2" value="3" />
<input type="submit" value="blah">
</form>
<script>
document.getElementById('foo').validity.rangeOverflow; //false
document.getElementById('bar').validity.rangeOverflow; //true
</script>
Related
Short:
I would like to use input type radio in form as a site navigation tool without need of clicking on submit button. Is this possible?
Explanation:
I am using jQuery Mobile library for my GUI and I like how the look of radio input is automatically changed - In this look I want to classify people according to their names and to switch between pages in long output.
My current code i like this:
<form action="custmers.php" method="post">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<input type="radio" name="nav" id="a" value="customers.php?letter=a">
<label for="a">A</label>
:
:
<input type="radio" name="nav" id="z" value="customers.php?letter=z">
<label for="z">Z</label>
</fieldset>
</form>
But except of highlighting currently clicked option the page doesn't redirect.
This might work (haven't tested it)
Its still early in the morning... So there is a chance I'm still tired and not thinking properly. Haha
Change your form to
<form action="customers.php" id="navigation" method="get">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<input type="radio" name="letter" id="a" value="a">
<label for="a">A</label>
:
:
<input type="radio" name="letter" id="z" value="z">
<label for="z">Z</label>
</fieldset>
</form>
Then add some jquery to your scripts
$(function(){
var $navigation=$('#navigation');
$navigation.on('change','input[name=letter]',function(){
$navigation.submit();
// or to take a more complicated (read: unneccessary)
// window.location($navigation.attr('action')+'?letter='+$(this).val());
});
});
Do note: you should consider some validation in here. I wont bother mentioning security since you didnt post the rest of your script.
As the title states, I'm trying to incorporate many searches into one search bar. More specifically, Google and Amazon. I have setup a radio option to set which site to search when one is selected.
This is the code I currently have:
<form method="get" action="http://www.google.com/search">
<div align="center" style="font-size:75%">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google or Amazon Search" /></br>
<input type="radio" name="sitesearch" value="" />The Web
<input type="radio" name="sitesearch" value="yoursite.com" checked />This Site
</div>
</form>
I have this form for Amazon, but I'm just unsure how to code it into the one search bar.
<form action="http://amazon.com/s/ref=nb_sb_noss" method="get" target="_blank">
<input type="text" id="twotabsearchtextbox" name="field-keywords">
<input type="submit" value="Search" class="nav-submit-input">
</form>
Use JavaScript to change the actual form action in page's DOM (and other parameters, if needed), depending on the user selection (use onclick event on radio to montior for change for example). Simple as that. You won't be able to do that in pure HTML without using some kind of proxy server to redirect the requests and return the results appropriately.
document.your-form.action = (google_selected) ? "http://www.google.com/search" : "http://amazon.com/s/ref=nb_sb_noss";
etc.
The Submit button on this form does nothing unless I remove style="display:none" from the template=row div. Why??
(The name of each form control is populated dynamically by javascript, however, to simplify troubleshooting, I ran the form without the javascript and the problem boils down to whether or not that display tag is there).
This is what Chrome console says:
bundleAn invalid form control with name='' is not focusable.
bundleAn invalid form control with name='label' is not focusable.
bundleAn invalid form control with name='unique' is not focusable
HTML:
<form method="POST" action="/add/bundle">
<p>
<input type="text" name="singular" placeholder="Singular Name" required>
<input type="text" name="plural" placeholder="Plural Name" required>
</p>
<h4>Asset Fields</h4>
<div class="template-view" id="template_row" style="display:none">
<input type="text" data-keyname="name" placeholder="Field Name">
<input type="text" data-keyname="hint" placeholder="Hint">
<select data-keyname="fieldtype" required>
<option value="">Field Type...</option>
</select>
<input type="checkbox" data-keyname="required" value="true"> Required
<input type="checkbox" data-keyname="search" value="true"> Searchable
<input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
<input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
<input type="radio" data-keyname="label" value="label" name="label" required> Label
<input type="radio" data-keyname="unique" value="unique" name="unique" required> Unique
<button class="add" type="button">+</button>
<button class="remove" type="button">-</button>
</div>
<div id="target_list"></div>
<p><input type="submit" name="form.submitted" value="Submit" autofocus></p>
</form>
The cause seems to be HTML 5 constraint validation - it's the require attribute. Chrome has started supporting this with it's recent versions.
Apparently it seems like this is a backward compatibility issue, but you can fix it with setting the formnovalidate attribute for your submit button.
I assume that this is actually a security feature that prevents submitting supposed user data by submitting manipulated, hidden content, this quote points in that direction:
If one of the controls is not being rendered (e.g. it has the hidden attribute set) then user agents may report a script error.
Your inputs are of type text, so their purpose is to let users enter data, submitting their content while hidden is something that a user probably wouldn't want.
If you still want to submit hidden inputs while using client validation, I would suggest using <input type="hidden"> instead - I could imagine that there is no error on validation there because they are intended to be invisible.
I made a JSFiddle to explore your problem here, and I managed to fix it by adding checked to your radiobutton inputs like so: <input type="radio" data-keyname="label" value="label" name="label" required checked>. In your code above, the radio buttons are not checked, but since they are marked as required the form is failing validation and Chrome refuses to submit the form.
I have a settings page in my Chrome extension and I am wondering what is the recommended ("best") way of obtaining user input. In my particular case, I need to present a set of combo choices along with a button. When the button is clicked, a javascript function should be executed. My understanding is that if I use a , this will post a request which I don't want (it causes the page to flash & reload). I want all of this to be client-side. Here is what I have so far (below). How can this be changed? Thanks in advance.
<form>
<input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
<input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
<input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
<input type="submit" value="Convert"/>
</form>
Bob, well, you can do everything in JavaScript. And since this is a Chrome Extension, feel free to use just HTML5.
<section>
<input type="radio" name="format" value="format1"/>(xxx) xxx-xxxx<br/>
<input type="radio" name="format" value="format2"/>xxx-xxx-xxxx<br/>
<input type="radio" name="format" value="format3"/>xxx.xxx.xxxx<br/>
<button id="btnConvert">Convert</button>
<script>
document.querySelector('#btnConvert').addEventListener('click', function(e) {
var format = document.querySelector('input[type="radio"]:checked');
alert( format.value);
}, false);
</script>
</section>
Hope that helps!
For example, would like 5 checks boxes to have their own submit button and the other 5 to have their own submit. Should be independednt of each other but they are not grouped together in the html page.
Do I nest the other form? Do I put them under the same name and if so how do I distinct the submit? Submit seems to submit the form name element, not the elements names within the form. (Using HTML and JS)
Thanks.
Your clarification doesn't make too much sense from a user standpoint. Perhaps you want something like this:
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form1">
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="user" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit1" name="Submit1" />
</form>
<form action="/cgi-bin/Lib.exe" method="post" name="checks" id="Form2">
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox1" />
<input type="checkbox" name="guest" value="'$NAME'" id="Checkbox2" />
<input type="submit" value="DELETE" id="Submit2" name="Submit2" />
</form>
I'd use the button element. Try this link: http://particletree.com/features/rediscovering-the-button-element/
Basically you use them as your submits. Firefox correctly sends the value attribute but IE sends the innerHTML. But they all come across as name=value/innerHTML.
So for example, using PHP, you could use
if (isset($_POST['nameOfButtonElement'])) {
echo 'user clicked this button';
}
EDIT: IE6 (surprise surprise) doesn't handle this correctly at all. See this question: IE 6 and the multiple button elements all sending their name & values
Maybe something like that (this way you can control it):
function ava_aken_hp()
{
// I use blank form with hidden fields to populate it with values from POST.
document.blank.action="https://www.mypage.com";
document.blank.elements["CHECK"].value=....;
...
document.blank.submit();
}
// In your form:
<input type="submit" value="Submit1" onclick="ava_aken_hp();">