I'm using happy.js for form validation. When an error occurs, a span with the class "unhappyMessage" will be placed directly before the form element that did not pass validation. The html ends up looking something like this:
<form id="myForm">
<label for="text1">Label 1</label><br />
<span id="text1_unhappy" class="unhappyMessage">Error message</span>
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span>
<input id="text2" type="text" />
</form>
The <span>s don't show up until an error occurs. I would like to use css to somehow filter the error messages to the top of the parent, as if it were coded like this:
<form id="myForm">
<span id="text1_unhappy" class="unhappyMessage">Error message</span><br />
<span id="text2_unhappy" class="unhappyMessage">Error message</span><br />
<label for="text1">Label 1</label><br />
<input id="text1" type="text" />
<br />
<label for="text2">Label 2</label><br />
<input id="text2" type="text" />
</form>
Note that I would like to make each .unhappyMessage appear on its own line as well. Is there a css-only way to do this?
Note: for those of you who are wondering, I want to use css only because I would have to do some reverse engineering in order to get this working with javascript, since it seems the only event I'm provided through happy.js is not the only time that error messages are created.
Css wont provide a solution for you. Look for another form validator if you have no easy access into the event delegation. Or look into the code to see if you can figure out a work around.
Edit:
looking at the happy.js page it provides a callback function for you to specify if you wish.
unHappy (function): A callback that gets triggered when form
submission is attempted but any fields fail validation.
So pass a function that prepends all the error messages.
Related
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>
Trying to avoid HTML form in the following way :
Instead of
<form action="submit_now.php" method="POST" name="my_form">
<input type="text" value="" />
<input type="submit" value="Submit" />
trying to use :
<input type="text" value="" />
<button value="Submit">Submit</button>
Reasons:
For the proposed second way, I do not need any jQuery form plugin like thing to tame the form to be submitted without redirection. Rather, on clicking the button I can do the client side validation and then send inputs to server side validation through an ajax call.
Is the reason not to use the second way all about the hidden fields as their values might be visible in the ajax params?
I have an HTML form that I'm trying to get to post with part of a query string already inplace, but it keeps re-writing the URL.
<form id="mls_form" action="/index.php?option=com_mls&view=mls" method="get">
<label>MLS#:</label>
<input type="text" name="mlsnum" />
<input type="submit" value="Go" />
</form>
Output is:
http://www.mysite.com/index.php?mlsnum=value
It seems really simple, but I don't know why it's re-writing the action attribute.
Use the POST method rather than the GET method. The URL parameters will be sent as specified in the action attribute, and the form inputs will be sent in the post data. Your server script can then read them each using whatever API is appropriate (in PHP, $_GET versus $_POST, or find them all in $_REQUEST).
If you must use GET you can give the additional parameters as hidden input fields.
<form id="mls_form" action="/index.php" method="GET">
<input type="hidden" name="option" value="com_mls" />
<input type="hidden" name="view" value="mls" />
<label>MLS#:</label>
<input type="text" name="mlsnum" />
<input type="submit" value="Go" />
</form>
I have a search form i made for a wordpress site.....visually it is good but still not functional.....please let me know what im missing here.
<body>
<form id="start" action="/">
<h1>Search our site</h1>
<p>
<label for="name">Entry</label>
<input type="text" id="name" size="35" />
</p>
<p> </p>
</p-->
<p>
<label>
<input type="checkbox" name="posts" id="posts" />
posts</label>
<label>
<input type="checkbox" name="pages" id="pages" />
pages</label>
<a class="submit" href="#">Submit</a></p>
</form>
<p id="credits"> </p>
</body>
You need to provide a way to submit the form.
<a class="submit" href="#" onclick="document.getElementById('start').submit()">Submit</a>
Based on the comments, we now know what you are trying to do. Your original question was not very specific.
In addition to the missing submit button, you also need to make sure you pass the correct variables in your form to the Wordpress search function. In your example:
<label for="name">Entry</label>
<input type="text" id="name" size="35" />
This code will handle the user input for the search term, I assume. The second line, the input element, needs a name like so:
<label for="name">Entry</label>
<input type="text" id="name" size="35" name="s" />
When this is submitted you will see the s=foo in the URL and that will tell Wordpress that it is doing a search.
I found this out by looking at the source code for a default wordpress search form. I'm not sure what the variables are needed for the other aspects of the form, "posts" and "pages", but you can examine a standard wordpress search form (maybe advanced search?) and then name your form elements appropriately.
Good luck!
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();">