I'm working on a project where the document object model is loaded from jqote templates that use input names with brackets to generate arrays on postback. The project was built this way so the rows could be sortable using jquery sortable prior to postback.
<form id="the_form">
<input type="text" id="field1" name="options[]" /><br />
<input type="text" id="field2" name="options[]" /><br />
<input type="text" id="field3" name="options[]" /><br />
<input type="submit" value="submit" />
</form>
My problem is that jquery validate does not play nice with the field names that include brackets. Sometimes it validates and sometimes it misses a field or two. I've been reading a lot of other posts stating this should work and I am wondering if I am doing something wrong or if there's a work around.
jQuery("#the_form").validate({
rules: {
"options[]": {
required: true
}
}
});
I've created a jsFiddle so others can see what I'm experiencing. If you run the jsFiddle and select Submit in the form, you'll immediately notice it only validates the first field, however if you tab through the fields, you see a different behavior. Thanks!
http://jsfiddle.net/PV6j7/1/
That is because they are currently all the same name.
They need to be different names in order to work
Quote:
"...My problem is that jquery validate does not play nice with the field names that include brackets."
This is true, but that's easily fixed with quotation marks. However, "brackets" are not really the problem here.
The root problem is that the plugin will not operate properly without a unique name on each field. There is no way around this.
Using a jQuery $.each() to assign rules via the .rules('add') method is discussed elsewhere, but it's been disproved as a viable workaround. That's because the root problem is not with selecting elements & assigning rules; the problem is that the plugin uses the name attribute to keep track of the elements being validated. This is impossible if the name is the same on all.
failed jQuery .each() demo
try this:
jQuery("#the_form").validate({
rules: {
"options": {
required: true
}
}
});
Related
I have a HTML form inside of a PHP file and I am trying to validate this form using Jquery. To my dismay,I am not able to have the form validated before the page is summited, ie refreshed. Furthermore, I have use seveal different plugins and I do not get any notifications of any kind. Here is the form as is:
<div id="contactRight">
<form method="post" action="form.php">
<input type="text" class="required" id="first" value="First*" ></input><br/>
<input type="Last Name" value="Last*" id="lastname"></input><br/>
<input type="text" value="Email*" id="email"></input><br/>
<textarea id="subject" id="subject">Subject*</textarea>
<input class="submit" type="submit" value="submit"></input>
</form>
Using the bassistance validation plugin it says that you can give your inputs a class with a value of "required" causing the validation plugin to kick in. I am overfly frustrated with my attempts of making this form work. More so, using HTML 5 is catastrophic, I do not receice any notifications of any input fields not being filled in. Is there a different approach I should be taking?
If you want to use HTML5's native form validation, do the following:
for input fields requiring a value, add required attribute in the input tag
for checking email, the input tag should have a type attribute as 'email'.
for other sorts of pattern matching, use pattern attribute with regex.
Reference:
https://blog.mozilla.org/webdev/2011/03/14/html5-form-validation-on-sumo/
http://www.developer.nokia.com/Blogs/Code/2012/11/21/creating-a-custom-html5-form-validation/
BTW, If you want to disable this native form validation, add novalidate attribute in form tag.
I have discovered the problem, I can add a placeholder tag which will allow me to keep the values empty. I had values, so the validator was working as expected. Silly Me. My next question though, is the placeholder tag applicable in all other browsers?
I have the following form:
<form id="vintro-upload-form" action="{url}?nexturl={nextUrl}" method="post" enctype="multipart/form-data" >
<input name="file" type="file"/>
<input name="token" type="hidden" value=""/>
<input value="Upload Video File" type="button" name="submit" onClick="checkFile()" class="button" />
</form>
and the following javascript:
<script>
function checkFile(){
var fileVal = document.forms["vintro-upload-form"].elements['file'].value;
//RegEx for valid file name and extensions.
if(fileVal != ""){vintro-upload-form.submit();}
else {alert('Please select the Video file.');}
}
</script>
What works? The fileVal assignment is good. Submit isn't working, when I checked the debugger, it is saying: "vintro is undefined."
What have I tried?
The following examples and code:
http://www.w3schools.com/jsref/met_form_submit.asp
http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml
document.vintro-upload-form.submit();
document.forms["vintro-upload-form"].submit();
document.getElementById("vintro-upload-form").submit();
changed the dashes/hyphens to underscores
All to no success. There is some jQuery (in another .js file) going on with this form as well, and it functions properly with the hyphenated name.
Why is the submit call not working?
EDIT:
I have tried using document.getElementById('vintro-upload-form').submit(); as suggested in the answers to this question, however, this is still failing. My (Firefox) debugger is saying that it is not a function. Chrome's debugger explained a little bit more: "Uncaught TypeError: Property 'submit' of object # is not a function" (I'm going to Google this in the meantime.)
Since I have less than 100 reputation:
Ok, so it turns out, I was asking the wrong question.
Here's the answer I found:
Submitting Form Via Javascript, form defined in external PHP file
Check the accepted answer as well.
This JavaScript:
document.forms["vintro-upload-form"].elements['file'].value
is looking for the NAME attribute of the form tag:
document.forms[{form_name}].elements[{field_name}].value
You just have an ID. Copy the value of the ID to a NAME and you're done.
However, document.getElementById() is the preferred, modern way of doing this with plain JavaScript.
HOWEVER: You can't have a submit / button named "submit".
When you do and you call the JavaScript submit() function, you get a conflict.
You simply need:document.getElementById('nameofform').submit() is easier to find elements by its id than for the name.
Other way is to get elements by name, you can do it with document.getElementsByName('nameofform')...But that returns an array so you need to iterate that array to find which of those forms is needed to be uploaded. So, I think you should use the id.
The name of your form contains characters that cannot be used in a JavaScript identifier (dashes). Use document.getElementById('vintro-upload-form').submit(); instead.
Is it possible in php to include a forms value into the action redirection?
For example:
<form method='POST' name='Select' action='customer.php?CID=xxxxx'>
<input type=text width='5' name='searchVal' />
where xxxxx is the value entered into the form.
I've tried a number of different ways and I'm just not figuring it out! (Still sort of new to php) Any help would be appreciated.
It was looking like I would have to use $_POST and $_GET. A little more information might be in order... customer.php displays a list of customers in order by ID, name, etc. The user currently clicks on the customer ID that they want to display the details for. I'm trying to add a box where they can just enter the customer number to get to the details quickly, but I still want to have the listing displayed. From what it is sounding like, I will have to do this as two separate programs...is that true?
How about this:
<form method='POST' name='Select' action='customer.php'>
<input type='hidden' value='xxxxx' name='CID' />
<input type=text width='5' name='searchVal' />
...
</form>
You are free to add as much hidden values as needed.
Note, that you can even use PHP-like array notation_
<input type='hidden' value='xxxxx' name='CID[1]' />
<input type='hidden' value='yyyyy' name='CID[2]' />
At the PHP-side, access those values using this syntax:
$_POST[ 'CID' ][ 1 ]
$_POST[ 'CID' ][ 2 ]
UPDATE-1
Ah, you want to use a user-entered values to the Action URL just before the form gets submitted?
In this case you need to use JavaScript. Access the DOM to change the Action URL.
But let me ask, why you need to post a form value additionally as a parameter of the Action URL?
UPDATE-2
You wrote: 'From what it is sounding like, I will have to do this as two separate programs...is that true?'
No, actually not. You can still use one customer.php which checks at its beginning, if it was called using a linked customer in the table element or a searched customer in the search field.
In other words: You don't need to prepare two scripts, but two forms for two purposes which call the same script customer.php.
You can include the required value in a hidden field in your form:
<input type="hidden" name="CID" value="xxxxx" />
The reason this is required is that you are submitting the form to your server via POST, but appending parameters to the URL requires submission via the GET method.
Not without a post to the server. The value in the form is filled in client-side, so it has to return to the server before you can add it to the action. (at least, if you want to use php).
You can either
add it after posting (might not be usefull)
use javascript
just not use the GET CID, but get it out of the POST in your customer.php script.
I got it finally! It's actually very simple!
In the body of the code I put this:
<form action='#_SELF' method='GET' name='Projected'>
<input type=text size=5 name='CID' value='' title='Enter Customer number to display' />
<a href='#' onclick='document.Projected.submit();' title='Enter Customer number to display'>Go</a>
And at the top of the code I just do a:
if (!isset($_GET['CID'])) { ...
It works exactly the way I wanted it to!
Thanks everyone for the help! I appreciate it! (And I'm learning more and more about PHP everyday!)
Im pretty sure you cant do that unfortunately
I am using jQuery auto-complete. I have download this script from http://code.google.com/p/jquery-autocomplete/. I want to use this on multiple fields. Please help me thanks.
$("#input").autocomplete("samefile.php");
$("#input").autocomplete("samefile.php");
thanks
the hash mark means you are using IDs to select elements. there should however never be more than one element in your page with the same ID. for instance,
<input id="test" /><input id="test" />
is invalid HTML.
The second problem, is that it appears you are trying to find tag names, which means you should simply leave out the hash mark from your code, and JQuery will apply your methods to all of the tags with that tag name,
$("input").autocomplete("samefile.php");
will apply autocomplete to all input tags on your page.
Third, I would use classes instead of tag names incase you ever want to have an input on your page that does not use the same auto complete. So your html would look like this,
<input class="auto" /><input class="auto" />
and your JQuery would look like this.
$(".auto").autocomplete("samefile.php);
I also wonder where you are calling your JQuery from?
You should use a less specific selector to mark multiple fields as autocomplete in one statement.
Maybe you can assign a class of type ".autocomplete" and then use that.
<input type=textbox" name="txt1" class="autocomplete"/>
<input type=textbox" name="txt2" class="autocomplete"/>
$(".autocomplete").autocomplete("samefile.php");
How do I make the text disappear like the way some fields work here on stackoverflow once I start putting in text? I tried out the different 'on'-actions in HTML but that didn't really do what I wanted.
Thanks.
You can do it with onfocus/onblur events. For example:
<input type="text" value="search" onfocus="if(this.value=='search')this.value=''"/>
If you click on this input field, the default text "search" will disappear. The onfocus event handler checks if this input field has the value of "search" and if so then clears it, in other cases (user has already typed something in) leaves everything as is.
Presumably you mean "Labels which appear inside the input".
If you want to do this in a sane, accessible, semantic way — use a <label>, if JS is available then position it under the element, and onfocus/onblur change classes around based on the value of the element.
I knocked up a simple example at http://dorward.me.uk/tmp/label-work/example.html using jQuery (all the source that isn't part of the jQuery library is embedded in the HTML of that document for easy reading).
jQuery would make this easy work;
http://www.jsfiddle.net/TshDN/
If you are using HTML 5 you could use the placeholder attribute.
http://dev.w3.org/html5/spec/Overview.html#the-placeholder-attribute
use the onFocus() in javascript
<input type="text" onfocus="if(this.value == 'value') { this.value = ''; }" value="value" />