Sunday 15 March 2015

jquery validation with datepicker, problems with highlight -


There are two fields on my form. I have a simple input for one name and the second is the 'Appetit Bootstrap Date Picker' However, when a 'name' is left blank, it turns red, and if it has default value for the other 'date_birth' then it becomes red So you have to enter a name and you can pick some dates from the default date Ni will.

I have added an error placement and success rules that I have described. But the problem is on my 'date_birth' field. It turns red when you do not select any other date, but after submitting a second time, if you choose some other date which is correct it does not change the green color as the 'name' above. ...

Here is the status in JS field:

html:

  & lt; Form class = "form-horizontal" id = "gold_form" method = 'post' verb = '/ start_ajax / addgold /' & gt; & Lt; Fieldset & gt; & Lt; Span class = "label-f" & gt; Name & lt; / Span & gt; & Lt; Input type = "text" class = "span4" id = "name" name = "name" & gt; & Lt; / Br & gt; & Lt; Span class = "label-f" & gt; Date of birth & lt; / Span & gt; & Lt; Div class = "input-app date notification" id = "date_birth_picker" data-date = "1980-01-01" data-date-format = "yyyy-mm-dd" & gt; & Lt; Input class = "span2" size = "16" type = "text" value = "1980-01-01" readonly = "" id = "date_bath" name = "date_birth" & gt; & Lt; Span class = "add-on" & gt; & Lt; I class = "icon-and" & gt; & Lt; / I & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; / Br & gt; & Lt; Button type = "submit" id = "submit_btn" class = "btn btn-primary btn-big" & gt; Submit & lt; / Button & gt; & Lt; / Fieldset & gt; & Lt; / Form & gt;   

script:

  // datepicker $ (function () {window.prettyPrint & prettyPrint (); $ ('# date_birth_picker'). Datepicker ({AutoCoos: True, Weekstart: 1,});}); // verification ($ ()) ready (function () {jQuery.validator.addMethod ("default unauthorized", function (value, element) {switch (element.value) {case $ (element) .prop ("defaultValue") Valid: $ ("rule: {date_birth:" required basic unauthorized ", name:" required ", family name:" required "}, error placement: function (error, element) {$ (element) (": .valid)"). AddClass ("invalid");}, success: function error) {$ ("# gold_form"). ('Valid.') RemoveClass ("invalid"). AddClass ("success");},});});   

CSS:

  @import url ('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); .error {float: none; Color: Red! Important; Padding-left: .5am; Vertical-alignment: top; } .Unlimited {range: 1px solid red! Important; } .success {border: 1px solid green! Important; }   

Am I forgetting something or what? You can easily edit my JSField.

Thanks for the help

You will need whenever the date picture hands it Changes, to check the validity of the date again.

After you have done your date picture, add changeDate event that runs method

  $ ('# Date_birth_picker') ('' Changeate ', function (ev) {if ($ (' # date_birth ') valid ()) {$ (' # date_birth ') on Datepicker ({autoclose: true, weekStart: 1,}) RemoveClass (' invalid '). AddClass (' success');}});   



No comments:

Post a Comment