vuejs-datepicker setting html required attribute on input fields doesn't work as expected and submits the form without have a input value.
<form>
<datepicker placeholder="Select Date" required></datepicker>
<button>Submit</button>
</form>
You can use the above code and test here:
https://codesandbox.io/s/p92k8l717
Here is the link to repo and doc: https://github.com/charliekassel/vuejs-datepicker
You can use vee-validate library to validate this like:
<date-picker :input-class="{'input': true, 'is-danger': errors.has('date') }"
v-model="date"
:disabled="state.disabled"
placeholder="Select date"
input-class="form-control"
></date-picker>
<span v-show="errors.has('date')" class="help is-danger-red">{{ errors.first('date') }}</span>
<input type="hidden" name="date" v-validate="'required'" v-model="date">
You can use this trick to solve this issue, It's works for me.
You can use input-attr to set the required attribute like :input-attr="{required: 'true'}"
I was facing the similar issue, not with this plugin but some other plugin and one get around that worked for me was using vee-validate
This is the best validation plugin available for vue-js.
Hope this helps!
A non-Vue datepicker library flatpickr also has this problem. I managed to resolve it by allowing user input (typeable prop of this library) which removes the readonly attribute which actually prevents the form submission on empty required field and also displays the native browser popup. The side effect is a date can now be directly typed into the input field which then forces you to parse the user input. To make up for that you have to suppress all user input in the field.
See the similar flatpickr question where I posted the complete solution. I used the onReady event of flatpickr which seems to have no equivalent in vuejs-datepicker settings unfortunately.
Flatpickr can be used in Vue thanks to vue-flatpickr-component library if you are OK with migrating.
Related
I'm trying to generate form fields dinamically with INSPINIA appearence, specifically INSPINIA datepicker. You can check this fields on: http://wrapbootstrap.com/preview/WB0R5L90S
First of all, I have at least one form generated with Symfony using the following code on the Type class.
{{ form_widget(form.date_from, { 'attr': {'class': 'datepicker form-control'}}) }}
This works fine, and generate the following html:
<input type="text" required="required" class="datepicker form-control" value="01-01-2017" aria-required="true">
Then, when I try to copy the entire form using JS and put the same code (cloning the form), the inspinia datepicker doesn't appears, only appears the standard text form.
It is posible to generate this datepicker using JavaScript?
Finally I fixed the problem, seems that Inspinia datepicker is based on jQuery datepicker, so.. I only need to call datepicker() function to get the code working as I expected.
More info about jQuery datepicker here: https://jqueryui.com/datepicker/
I have an input field. In which I want to fix a value. I am able to fix the value by putting readonly but it's not passing the value which I have put as fixed.
what I am doing is:-
<input name="txt_zip_code" class="z-con-input adj-z-con-input" style="background:#eee" type="text" maxlength="13" field="txt_zip_code" value="98052" readonly="readonly" />
I want to make the value same for every user.
Can I get any help in this.
You have not included what back end system you are using, which is relevant information. However, with PHP and ASP.NET MVC I've discovered a similar behavior. I believe you are describing disabled/readonly inputs sending null values to the back end controller. In the past, I've found that I had to re-enable inputs with Javascript before submitting them to the controller. The jquery to do this is:
$("input[type='submit']").click(function(e){
e.preventDefault();
$("input").removeProp('readonly');
$("form").submit();
});
However, if the field is always static, you may just want to hard code it on the back end.
I'd also recommend you check out the w3 specification on disabled elements to make sure the readonly attribute is the correct attribute for you. You are currently using the readonly attribute incorrectly, as it is a boolean attribute.
<input readonly="readonly">
should be:
<input readonly>
I have an angular form which was using angular's built-in validation successfully. Take the following markup for example:
<form name="numberForm" novalidate>
<input type="text" required />
<button type="submit">Submit</button>
</form>
When the browser loads, the input field renders like this (unnecessary attributes removed):
<input class="ng-pristine ng-invalid ng-invalid-required" />
If I were to enter a value in the input field, the markup turns into:
<input class="ng-dirty ng-valid ng-valid-required" />
All of this was working great. Then I implemented two jQuery plugins to implement some masking/input formatting for the form: autoNumeric and jQuery.maskedinput. Now, nothing I do will change the original ng-pristine ng-invalid... classes on the input. It also doesn't seem to allow the binding of models to be successful either.
Any ideas?
I tried creating a http://jsfiddle.net/ma44H/3/, but can't seem to figure out how to get it to work.
JQuery and Angular do not cooperate well
Chocolate and Peanut Butter taste great together, but AngularJS and JQuery are a painful mix. We've all tried (with varying success) to accomplish this.
The problem is that JQuery DOM manipulation works outside of AngularJS Digest Cycle. The lesson is usually that using pure Angular is better.
Alternative #1: Angular UI
Try Angular-UI. Set of tools every Angular Developer could use.
Whatever Mask you want to implement can be done with their ui-mask directive:
Want a Date Mask?
<input type="text" ng-model="date" ui-mask="99/99/9999" />
Currency Mask?
<input type="text" ng-model="currency" ui-mask="$99999999.99" />
Phone Mask?
<input type="text" ng-model="phone" ui-mask="1 (999) 999-9999" />
:
See Fiddle
:
Alternative #2: Filters
Angular has built-in filters:
Currency:
$filter('currency')(amount, symbol)
Date:
$filter('date')(date, format)
Insist on using JQuery? Try the jQuery Passthrough directive from the angular-ui toolset. I haven't made use of this directive but it's an intriguing option:
To call something like $.fn.tooltip() simply do ui-jq="tooltip". Note
that the name of the function must be identical. This also works for
normal jQuery commands such as $.fn.slideUp().
To pass parameters use the ui-options attribute. The value will be
evaluated in the $scope context and passed to the function. If
defaults are set, the passed options will extend them. If a string is
passed, the default options will be ignored.
Use the directive name jq for namespacing inside uiJqConfig. Then
sub-namespace options for each function by the name of that function
(exactly as it is passed to ui-jq) so that you don't have to pass
options every time you call the directive.
Hi I am using a ui mask to format a phone number in an input box. Problem is the ngmodel is not matching what I see on the screen. For example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx"class="form-control" data-ng-model="search.phone" maxlength="12" >
what i see on screen: 778-673-7892
ng-model value: 7786737892
How do I fix this?
Thanks
This is a little out-of-date, for those looking at the latest ui-mask (1.2, it may be in older versions as well), the official attribute that it's observing is "modelViewValue". Example:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" ng-model="search.phone" model-view-value="true">
This will preserve your model value to include look of the mask.
I know this has been completed, but I don't know if it has been officially released yet. Try doing this:
<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" class="form-control" data-ng-model="search.phone" maxlength="12" ui-mask-use-viewvalue="true">
If it doesn't work, you can make the changes yourself, you just have to find the file the mask directive is in, and make the changes you see here
I have a long long long form. It has about 200 fields. Now, about 50 fields need to be validated through JavaScript / jQuery. How can I easily validate them without a huge amount of code. I want to avoid doing this:
field1 = document.getElementById("field1").value;
if (field1 == '') {
alert ("Please enter a value for Field1");
return false
}
Is there an easier way? Thanks a lot.
Use the jquery Form validation plugin and assign the correct classes to the fields.
It's as simple as class="required" in most cases!
If you just want to check if the field is empty or not you could do something like this using jQuery:
HTML:
<form>
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
<input type="text" />
<input class="validate" type="text" />
</form>
SCRIPT:
$('.validate').each(function() { //this will get every input marked with class "validate"
if ($(this).val() == '')
return false;
});
Using JQuery validate plugin can be much help. You can control the way plugin works from your HTML code and even not write any javascript! If you need more complex validatio, you can extend it by adding specific validation functions. It allows you to localize the application as well.
This page gives a good example on how to use the plugin: http://jquery.bassistance.de/validate/demo/milk/ (click the "Show script used on this page" link).
Here is a rudimentary fiddle, that you can use to validate your form, Just add a span after each of the fields that you need to validate.
http://jsfiddle.net/refhat/h2S6G/35/
I thought about this too, but the plugin can be a bit difficult to
use. Do you know if it allows to display an alert box when an error is
found, instead of the actual displaying on the page? That's a bit too
much for this form. Thanks a lot
Here's a validator I wrote that uses a pop-up style alert box for error messages. Is that the sort of thing you are after?
http://validator.codeplex.com/
Do you want default error messages like for required validator? Regarding jquery validate plugin was it the syntax it offers to place validation information in the method call you found difficult since for a large form having validation information located separately from the text boxes makes it harder to go through and verify all fields have the right validators and messages?