I am having problems with a password field because it doesn't shows properly the emptytext that I pass through the config object, here is my code:
{xtype: 'textfield',
inputType: 'password',
emptyText: '//Password',
width: 200}
the problem is that the EmptyText looks like a password too and users can't read it. Please helpme with this, thanks in advance.
Abel
You cant easily do what you want with the default Ext.form.TextField component.
Normally, Ext will use <input type="text" /> , but when inputType is set to 'password', it uses an <input type="password" /> field instead.
When you supply an emptyText field, all it does is pre-populate the field with the emptyText (ie: value="emptyText") and adds a CSS className to make the text dull.
When the field is blank, or the value in the field is the same as emptyText, the field is considered to be blank.
Anyway, to do what your asking for, you'll have to extend TextField, and to some trickery to mimic the behavior.
Effectively, when the text value is emptyText, hide the password field, and show a normal text field.
Another solution that will work for modern browsers is to use the new HTML5 placeholder attribute on your input field. You'll have to either extend Ext.form.TextField to add this as a config option, or manipulate the DOM after render to add it. (personally, I think adding placeholder as a config option should be added to the Ext JS library)
Related
I am using jquery-tagsinput-revisited plugin that displays the data from the database and performs the functionality of autosuggestion and tag. The only issue that I am facing is that it does not go well with HTML default attribute required.
Ideally, if a required field is empty and we try to submit a form it gives a message telling the user to fill that field, but with this plugin, the required keyword is not displaying the message.
My original i/p field is
<input id="value" name="tags-4" type="text" required>
The plugin is replacing this field with its own code and removes the required attribute
I tried to modify the options section by adding the following attribute
$('.tagsinput#tags').tagsInput({
required: required,
});
but still, I did not get the message.
I want if the field where this plugin used is left empty the user should get a message like this
Can anyone please tell me how to do it ?
I have this working code which I'm using to set placeholder values for username and password fields:
<script>document.getElementById("user_login").setAttribute("placeholder","Please enter your Email Address");</script>
and
<script>document.getElementById("user_pass").setAttribute("placeholder","Please enter your Password");</script>
Now I'm trying to apply this to a 3rd box which has the input ID #memb_password_send-1-email-input but this isn't a straight up element, it's an input field and using this ID (as above) obviously doesn't work.
Here is a picture of console:
What would be the correct way to target this field with placeholder text?
Same method used to provide placeholder for username and password fields would work in this case as well as those are input fields as well. Just make sure that when you are writing this code in in-line script, do this after that input box has rendered i.e. after it's markup so that element is available to get selected.
I am using readonly, disabled and required property of input text field like this:
<input type="text" id="visitDate" name="visitdate" readonly="readonly" disabled="disabled" required="required" />
My problem is that two of three property i.e. disabled and readonly are working properly but required is not working. Submit button allows to submit even it is empty. But if I remove readonly form can't be submitted empty.
I use
readonly because I am using date picker and user are not allowed to
input date manual.
disabled because I want this input field disable at the beginning
required because use must select date from date picker so that date
will not be empty.
What actually happen is that by default(HTML Implementation of Validations), the validation in HTML will not fire if a field is read-only or disable.
The Reason to it is simple. If the field is empty with attribute disabled or read-only, and a required validation is applied, the form could not be valid at any time.
It seems like there is no direct and ethical solution to this, but the indirect solution could be:
i) Handeling key-up/key-down events so that input could not be added.
jQuery Code:
$('input').keypress(function(e) {
e.preventDefault();
});
ii) For disabling control, I would suggest not to add the datepicker to the element until you want. Later, you can add it using JS when needed(In your case, register datepicker on select list changed event).
Also, you can use Enable and Disable jQuery events if you are using jQuery UI Datepickers like below:
$("#txtSearch").datepicker("enable");
$("#txtSearch").datepicker("disable");
For further reading, you can have a look to this link. This is a discussion on Bootstrap validation, but it applies to pure HTML too.
Hope, this will help.
If an element is disabled, it is ignored in form validation.
From the WHATWG specification for HTML:
If an element is disabled, it is barred from constraint validation. (source)
You almost certainly don't actually want disabled here: you want the behaviour of readonly. From the section documenting that attribute:
The difference between disabled and readonly is that read-only controls can still function, whereas disabled controls generally do not function as controls until they are enabled. (source)
"Still functioning" includes validation, as well as things like the value being part of the data sent when the form is submitted.
As part of my websites setup I am using a login form that is generated using a shortcode; because of this I cannot add the placeholder attribute in the HTML of the form so my only option is to add it using JS/jQuery. Unfortunately this is an area of website development that I am unfamiliar with.
I need to add 2 different placeholder texts, one for the 'Email' field and another for the 'Password' field. To make this easier you can view the form here:
https://members.argentumfx.co.uk
The top field is for the 'Email' placeholder and the bottom field is for the 'Password' placeholder.
Here is an example of what I'm looking for:
View Placeholder Mockup
#user_login is the ID of the Email field; #user_pass is the ID of the Password field.
Please can someone provide me with some JS/jQuery to achieve this task?
Without any libraries:
document.getElementById("user_login").setAttribute("placeholder","Email Address");
If you have jQuery, you can use the attr method to set the placeholder attribute on each input.
$(function() {
$('input#user_login').attr('placeholder', 'Email Address');
$('input#user_pass').attr('placeholder', 'Password');
});
I have some fields that are shown only depending on some conditions, it work's fine to show and hide field with Jquery
but these fields are validated on submit even if they are hidden, I have required in the model
how I can't validate the hidden fields ?? I found : http://fluentvalidation.codeplex.com/
or I can apply the following MVC hidden field being validated
Thanks
you can change the input name attribute when you are hiding/showing it.
That way the it would be ignored.
When you are doing your validation, add a condition:
if($("#myHiddenElement").css("display")!="none")