jQuery DatePicker prevent manual input and get required on validate

Question

I know this question in part already in the answer that using readonly if you didn't want user not allowing input manual on datepicker, but my problem is, i wanna make these input get validate too. Here's my code

<input type="text" id="closed" name="closed" class="form-control datepicker" readonly/>

And here my javascript:

$("#formkarir").validate({
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    rules: {
        "closed": {
            required: true
        }
    },
    messages: {
        "closed": {
            required: "Please, input expired recruitment job"
        }
    }
});

But when that closed is empty value and I press the button it didn't show the message. When I cleared readonlyon that closed, is working it show message. But my problem is, I don't wanna my input closed get manual input. How can I do that?

I'm using readonly because I'm afraid my user will input different date format. So anyone have idea how to resolve my problem?

Razor_alpha · Answer 1 · 2017-12-20T05:11:44.457

0

There is a workaround that makes it readonly only when the field gets focus, and removes it once they left it: How can I enable jquery validation on readonly fields?

Another option would be to set the html fields input format with regex: https://www.w3schools.com/tags/att_input_pattern.asp

And another option would be to manually iterate over all the fields when validating. The link above should have attempts for this too.

edited Dec 20 '17 at 05:11

answered Dec 20 '17 at 04:50

Razor_alpha

89
8

i try on first option you give, but is not doin anything, still didnt show massage if empty, any sugesstion where i put focus on that?? – Wolfzmus Dec 20 '17 at 07:56
What do you mean by "when empty"? Try to put log lines on the blur event to see if the readonly property removal is really called when it should, and maybe remove the readonly property on the submit event too. – Razor_alpha Dec 20 '17 at 08:20
i mean "empty" is not having value on that. And i just answer my question, is kinda silly. By the way thanks for helping me. :) But i kinda like your first option answer. :) – Wolfzmus Dec 20 '17 at 08:25
I'm glad you figured something out. :) – Razor_alpha Dec 20 '17 at 22:06

score 0 · Accepted Answer · answered Dec 20 '17 at 08:23

Ok i found the soltuion, and is kinda silly tought, so i just relize my plugin bootstrap datepicker not allowed to add/edit manual date, they must pick a date. So doesn't need readonly. Thank's for helping me and try edititng my answer for make better quesiton. :)

jQuery DatePicker prevent manual input and get required on validate

2 Answers2