Monday 15 July 2013

jquery validation messages in one separated div -


I have jquery validation plugin on my form, currently configured in such a manner so that it adds border color to the input Could. If verification is not valid, the range becomes red, if the right border becomes green, due to that setup, I have disabled the display of messages.

But I need to display all the messages in a different division below the input field.

You can see the current status here:

Therefore 'name' and 'location' are my two fields' message 'container'. I have my div in which I defined those in script I want to display messages.

html:

  & lt; Form class = "form-horizontal" id = "gold_form" Method = 'post' action = '/ 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; Place & lt; / Span & gt; & Lt; Input type = "text" class = "span4" id = "place" name = "location" & gt; & Lt; / Br & gt; & Lt; Div class = "messages_container" & gt; & Lt; / Div & 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:

  $ verification $ (). Validate ({{"name:" name: "required", place: "required"}, message: {name: "Please input your name", place: " Please input your name ".}, Error placement: function (error, element) {$ (element). Filter (': (no: .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'); . Inline (range: 1px solid red! Important;) .success {border: 1px solid green! Important;} .messages_container {border: 1px solid; width: 300px; height: 150px; margin-left: 37px;}   

You can release or update your JSW, anything to give me some ideas or solutions.

to

  

Error Placement



No comments:

Post a Comment