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 ?
Related
I'm developing a settings component which should have input fields, that are filled with the current settings on the page load via Firebase.
They are essentially filled like this:
<input type="text" #name="ngModel" name="name" value="{{ data.name }} ngModel">
After clicking on a Save Button, either only the changed data or all the data should be written to the database.
Easy right?
Unfortunately when using the ngForm directive, formData.name.value returns an empty string, if the form remains untouched. Only after changing the input fields, the value is recognized.
How can I surpass this issue without a huge hassle?
As far as I know there isn't event an option to check if a single input field was tampered with. Only the whole form can be dirty or not.
I'm trying to create a simple input with html5 "required". I'm using placeholder, so I'd like the initial value of the input to be empty. I have the input bound to a ng-model that is initialized as empty (so the placeholder shows).
When I go to the page, it shows that input is required for the , which shouldn't show unless the user submits the form and the input is empty.
how can I do this:
<input type="text" required ng-model="name">
..in controller:
$scope.name = "";
and not have the form think I am submitting an empty input?
One way of only validating when the user has actually interacted with your input element is to use $dirty to determine wether to show your error message. e.g.
<span ng-show="form.name.$dirty && form.name.$error.required">
Name is required
</span>
I just created an example of form validation regarding to your question
This should be working:
http://plnkr.co/edit/6PTNg3atPHAjL0XFtvWj?p=preview
I am using Flask as the backend. And I wrote a simple form with WTForm, say,
field = StringField('input:', validators=[Required()])
And I write a JQuery to fill it automatically
$('#theidofthefield').val('fillingin');
And I click the submit button in the form but it shows that the field is empty. And I check the request.form.field.data is also empty.
Hope to get a solution.
I have no idea about WTForm but you can check if your field element has got the name attribute, which is required to send back to the backend code.
Your field has to be something like this:
<input type="text" name="thenameofthefield" id="theidofthefield" />
//-----------------^^^^^^^^^^^^^^^^^^^^^^^---name attribute is required.
Another way to fill value is:
$('#theidofthefield').attr('value','filling');
Lets see if it works..
In case variable field is pointer to the object then..
$(field).val('dfsdf') or $(field).attr('value','filling') may work.
I have a form where an admin can add candidates. When I run my application in IE8, and click on reset button, it removes placeholder from all the fields. I am using placeholder.js to support placeholder property in IE8.
Here is my reset function ...
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
}
My form is like that ....
<form name="addCandidateForm" id="addCandidateForm" method="Post">
<input type="text" name="cname" id="cname" class="inputBox bdr-radius5" placeholder="Enter candidate name" autocomplete="off"/>
.....
.....
<span class="global-button" onclick="resetCandidateData();">Reset</span>
</form>
First time when page refresh, it showing placeholder in each of my textfields in IE8 but after reset all are vanish. Please help.
I don't know anything about the specific placeholder.js library that you're using, and you didn't provide a link, so I can't even tell which one it is.
However, it sounds to me like you need to use a better placeholder script.
If resetting the fields clears the placeholders, then it means that the script is using the field value to display the placeholder.
This is fine, but does have some limitations, in particular as you've seen with resetting the fields, but it also means that you can't have placeholders on a password field (because they would show up as stars like the password itself), and you can't easily have the placeholder styled differently to the field values.
For all these reasons, I prefer a placeholder script that uses a different technique - eg putting the placeholder in its own element and displaying it on top of (or behind) the input field, rather than actually using the input field itself for the placeholder.
So therefore my advice is to find an alternative placeholder script. It should be fairly straightforward to take one out and plug another one in, and there are plenty of them out there to pick from. Take a look here for a list of some of the best ones.
Hope that helps.
Change your resetCandidateData function to
function resetCandidateData(){
$("#addCandidateForm")[0].reset();
$.Placeholder.init();
}
It should restore the placeholders.
I'm using MVC 3 with Razor and using unobtrusive client validation. Things are working great, but I want to be able to reset the form if a user decides he wants to start over or cancel his action. It seems that there is a lot of meta data attached to each form element when using the validation.
<input type="text" value="" name="User.FirstName" id="User_FirstName" data-val-required="The First Name field is required." data-val-length-max="50" data-val-length="The field FirstName must be a string with a maximum length of 50." data-val="true" class="text-box single-line">
The jQuery snippet here shows my problem. When you try to manually reset the value of the text field, some other javascript is intercepting execution after I clear the value and it sets it back to what it was:
$("#btnReset").click(function () {
alert($("#User_FirstName").val());
$("#User_FirstName").val("");
alert($("#User_FirstName").val());
});
I'm looking for pointers here on how to clear form values when a user clicks a button. It seems like such a simple task, but I can find no documentation how to accomplish this and I haven't found anything here or elsewhere to help.
I was using an html input of type reset rather than the button type. The reset should not have been used in this case.