(Javascript) Can i set "autocomplete=off" for Single Inputbox? - javascript

Inside a <form> I want to use multiple Password type fields but.. I want to make some of them not to be remembering the value of it.
Normally i can use autocomplete=off inside <form> tag.
But this affects over every single fields inside.
Edited: Got Simple Solution Now
<input autocomplete="off" ....... />

Yes, you can (set autocomplete="off" on individual inputs).

You can set autocomplete on a single field by using:
#Html.TextBoxFor(x => x.Property, new {autocomplete = "off"})
If you're using DisplayForModel than you will have to create a custom Edit Template.

You can set it on individual fields, but it's a non-standard HTMl extension and will cause your pages to fail validation: Is there a W3C valid way to disable autocomplete in a HTML form?

Related

Check if field is required?

I need to find all required fields in given form using jquery. I was using this syntax:
$('input[required],select[required]')
This was doing job, but now I started using jQuery Validation Plugin. As i understood plugin would not add 'required' attribute to field, and thats why above script is failing to find required fields. Is it possible select required field when using jQuery Validation Plugin?
As I understood plugin would not add 'required' attribute to field, and thats why above script is failing to find required fields.
The jQuery Validate plugin does not dynamically add or remove attributes from the input elements. It only adds/removes a class depending on whether the field is valid or invalid.
Is it possible select required field when using jQuery Validation Plugin?
Not directly. There is nothing unique about an input when the field has the "required" rule declared by the plugin's settings.
However, with this plugin, rules can be declared on the fields using several other methods... just two examples follow.
Instead of declaring the required rule via the rules object within .validate(), simply add the HTML5 required attribute to the fields yourself. The jQuery Validate plugin will work by picking up this HTML5 attribute and assigning the required rule to the field for validation.
<input type="text" name="foo" required />
OR
<input type="text" name="foo" required="required" />
and you don't need to specify the element itself in the selector, just the attribute, like this...
$('[required]')
OR
$('[required="required"]')
You can also assign the rule via a class...
<input type="text" name="bar" class="required" />
then you can easily select all elements with this class...
$('.required')
This demo shows three different ways to assign the required rule.
DEMO: jsfiddle.net/fg25jsw3/

HTML 5 check field

I have a this form:
<html>
<form name=“test” action=“test.php”>
<input type=“text” name=“surname” pattern=“.{3,}>”
<input type=“submit” value=“send”>
</form>
I want that the “surname” field has at least 3 characters and for this reason I added the pattern attribute (I use HTML5) but in this way I check this every time the user clicks the "send" button while I want to check this every time the user edits the "surname" field without using javascript but only HTML5.
Is it possible?
you need to add client-side javascript to your form before php processing,
to check the input sequence or pattern of letters and numbers you need to add a regular expression to check the value of the input
It is not possible without using JavaScript. See the HTML5 specification for more details. However you can change the CSS as an indication of an invalid value:
input[pattern]:invalid {
color:red;
}

How to fill a form field with no id or class using imacros?

I am working on a website I need to submit a lot of data so I am using imacros to fill but one field remains blank. This is because it has no id or class and has a changeable "name". This value can change on every reload.
How do I fill this field with imacros.
<input value="" size="20" max-length="6" name="122637" type="text">
I hope using XPATH will solve you problem.. Find the Xpath of that field, and use it in the TAG, like below
TAG XPATH="//form[#id='demo']/fieldset[1]/ol/li[1]/input[1]" CONTENT="Gulam"
I don't know how imacros works, but try matching against all attributes
document.querySelector('input[value][size="20"][max-length="6"][type=text]')

Making an input non-editable without disabling

I have a form which calculates a cost and sets the value of an input accordingly. For obvious reasons, I have used:
$('#totalcost').attr('disabled',true);
to prevent the user from being able to edit the cost.
However, when I do this, the PHP script I'm using to mail the form doesn't pick up the input (not just the value - it doesn't read the input at all). When the input is enabled, it works fine.
How can I prevent the user from editing the input while still having the PHP mailing the value? Or is there a better way to do this anyway?
Make it readonly, not disabled:
$("#totalcost").attr('readonly', true);
You could also do it in the original HTML, since it's not something you really want to change back and forth dynamically.
<input id="totalcost" type="text" readonly>
Use Read Only property, Though i guess it wont work in internet exploer.
Add readonly attribute, like this:
$("#totalcost").attr('readonly', true);
Add property readonly="true".
$('#totalcost').attr('readonly',true);
you can try:
$("#totalcost").prop("readonly",true);
Use read only in html itself or in script
<input type="text" name="totalcost" id="totalcost" value="" readonly>
$('#totalcost').attr("readonly", true);

HTML5 Browser Validation - 1 form, 2 buttons, need to change validation

I have a form with two buttons - one is a "submit" button at the end of the form, and in the middle of the form I have an "Add" button that uses Javascript to add hidden input elements within the form whenever it's clicked.
Here are the two input fields/add button:
<input name="name" required>
<input name="email" required type="email">
<button type="submit">Add</button>
And then another set of input fields:
<input name="title" required>
<button type="submit">Submit</button>
And these are all within one form.
I want HTML5 browser validation to fire on the "name" and "email" fields when I click "Add" (but not the "title" field) and the browser validation to fire on the "title" field (but not the "name" and "input" fields) when I click "Submit." Is there any way to accomplish this?
You can add or remove attribute "required" to the fields to which you required by
$('#field_id').attr('required','true');
$('#field_id').removeAttr('required');
Is there any particular reason that you want to use HTML5 to validate your form in the first place? I feel like what you need would be easily accomplished using Javascript, and you noted that your add button would be using javascript anyway. Also, why would your form validation to be partitioned in such an odd way?
I don't even like the HTML5 validation in the first place. For example, if you type in "asdf#1" into an HTML5 email input, it will accept it. Now, you can make the argument that that's technically a valid email address, but I think in practice most people would agree that they wouldn't accept that as a valid email address. You could use an IP address in place of the domain but I highly doubt that you could use that as an email to log into any modern web page.
But I digress. To answer your question, you could write a quick function with JQuery that would override the form validation based on which button was clicked. You would do this by catching the "invalid" error thrown by the HTML5 validation for that particular input and returning false to get around it. Therefore, when you clicked submit you could override the name and email form validation, and vice versa for when you click the add button. Again, I have no idea why you would want to do this but it is a solution.
The only way I see is to set the required attributes (or: properties) dynamically on-click.
Or you can add and remove event listeners for invalid, which seem to suppress the native "missing"/"wrong format" notice - even if they do nothing (like preventDefaultAction or so).
I also tried buttons with the formnovalidate attribute and manually checkValidity() on the elected elements, but even though that fires "invalid"-events no native dialogue is shown and the submit is not cancelled. (tested everything with opera)

Categories