Submit form not allowed if tag empty - ng-tags-input

I have form with ngTagsInput field that I submit on button click.
But if user press space a few times and text value looks like text: " " then I am not allowed to submit my form because formName.$valid is false. Is there any way to allow that to happen with ngTagsInput API? or any other way to accomplish that?

It is doable with allowLeftoverText set to true.

Related

Enable a Disabled Submit Button when both a Select field is selected, and Input field has a number input? Javascript

I am working on a project that has a form with a Select dropdown and an Input field with a disabled Submit button. I need the submit button to be disabled until both of these fields are filled and the the second input is a number. I am thinking of using event listener for both filed but do not know how to handle two changes in one function.
let select = document.querySelector("select#slect_items");
select.addEventListener('change', checkSelection);
let input = document.querySelector("input#number");
input.addEventListener("input", checkInput)
Next I am going to define both checkInput and Check selection.
I can get individual function working to dsiable the submit button but do not know how can I combine both eventlisteners together and enable submit button in a single function.
I saw one similar question asked using Jquery. However, I am a beginner and this project has to be coded in JavaScript.
Thanks for your time

Grails: how to reset a form in grails

I've already created the form and reset button for my application.
My reset button looks like this
<g:render template="/layouts/pageButtons" model="[type:'reset', value:'reset', reset:true]"/>
And my form is composed of textFields and radioButtons.
This is how I made my radio button:
<g:render template="/layouts/customElements" model="[type: 'radio', radioName: 'gender', radioLabels: ['Male','Female'], radioValues: ['M','F'], radioValue: employeeInstance?.gender]" />
I also have a portion in my page that shows the error messages if you have an invalid input, etc.
My question if, if I tried to click the existing reset button that I have, All fields will be affected except for the radioButton and the errorMessages. Which means that if I chose "Female button" it will not reset the value. And the error messages would remain in the page.
What can I do so that radio buttons will be affected by the reset and that error messages will be cleared?
Note: I need to use the render tag for reset and radio button, so please give me a solution that would use that as well. Thank you.

Validation of date input into textbox when using JQueryUI Datepicker

I have a textbox that I've attached the datepicker to. If the user enters the date via the datepicker all is well but they also have the ability to go in and enter a bad date directly into the textbox. i.e. 1/55/1995
Can the text box be disabled so only the calendar can be used?
How are people preventing this?
Looks like what you need is to just disable the field or make it readonly. Check out this answer How can I disable all keyboard keys?
I would say readonly is the better option because it still allows the value to be retrieved when it is posted back; don't think disabled fields get picked up.
You can validate the input text, if entered manually to the textbox.
Have a look at the url below,
http://keith-wood.name/uiDatepickerValidation.html
Hope this helps.
Cheers

Focus on textarea based from anchor link

I have a messaging function in my site that when a user clicks on a reply button they get redirected to the message and have the textarea focus based from the anchor link.
so the link structure is like this:
view_message/4fad37da1df#reply
thanks
Try:
if (window.location.hash) {
$(window.location.hash).attr("tabindex", -1).focus();
}
It should check if the url has a hash in it, and if it does, give the target the tabindex attribute with a value of -1 and apply focus.
See https://stackoverflow.com/a/6188217/430191 for the reason for the tabindex attribute (a related issue about keyboard focus in IE/Chrome/Safari)

Asp.Net Mvc remote validation textbox focus issue

I have a single textbox on a form - basically to allow users to change the URL of their site in our mini CMS. We use remote validation to check that the URL is not already taken.
They enter their desired URL and hit the save button. If they do just that and the focus goes from the textbox straight to the submit button - the validation does not happen and the form doesn't submit properly. If they tap into an area of whitespace then the form does.
The issue with the form submitting is that if they tap whitespace we get the name of the submit button posted along with the desired URL - we use the (AcceptParameterAttribute) to allow us to route form submits to the right Action. This uses the submit buttons name attribute to do this. If they don't click whitespace to lose focus on the text box then only the desired URL is posted.
This is a really odd one and it is very annoying. Has anyone seen anything like this before? Is there a way to overcome the problem?
Try adding the following script to the page:
$(":input").live("blur", function () {
$(this.form).validate().element(this);
});
This should cause validation to occur when you click on the submit button. If not, try changing the first line to:
$(":submit").live("click", function () {

Resources