Appending <div class="error"> for validation using jQuery.

2,694 views
Skip to first unread message

Prasad Muley

unread,
Jul 25, 2013, 1:09:27 AM7/25/13
to
Hello All,
            I am newbie web2py programmer. I tried to do custom validation  using jQuery but not gettng expected result. Code is as followed:

Model-db.py

db.define_table('taxpayer',
                Field('name'),
                Field('married','boolean'),
                Field('spouse_name')
                )
# I don't want use IS_NOT_EMPTY() in this table

Controller-default.py

def taxer():
    grid=SQLFORM.grid(db.taxpayer,user_signature=False)
    if request.args(0) in ['edit']:
        form=grid.update_form
        if form.process().accepted:
            response.flash=form.vars
    return dict(grid=grid)


View- default/taxer.html

{{extend 'layout.html'}}
{{=grid}}
<script>
    jQuery(document).ready( function(){
        var flag=0
        jQuery('.web2py_form').submit(function(){
            //Getting value from tracker status
            var get_name=jQuery('#taxpayer_name').val()
                if(get_name =="") {
                if(flag==0) {
                               //alert("Please Enter valid Name");  WORKING
                               jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo("#taxpayer_name__label")  // WORKING
                               jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo("#taxpayer_name") // NOT WORKING
                              flag=1
                            }
                return false
                }
        });  
    });
</script>

Please help me for this.
I want to display error message for 'name' field as IS_NOT_EMPTY() does.
It successfully does for taxpayer_name__label even as well as taxpayer_name__row but isn't working for taxpayer_name id.

Joe Barnhart

unread,
Jul 25, 2013, 3:55:39 AM7/25/13
to web...@googlegroups.com
It's probably just a typo, but shouldn't there be a semi-colon after the line that is "// WORKING" as a comment?  You need to separate javascript lines with semi-colons, except for the last statement in a function.  (But even there it doesn't hurt anything if you put one in.)

Get Firebug on Firefox and open the "console" pane.  It shows you if you have any javascript errors.

-- Joe B.

Prasad Muley

unread,
Jul 25, 2013, 5:09:09 AM7/25/13
to
Hello Joe,
              I made a mistake while pasting. // working isn't there in updated code.
actual code is
{{extend 'layout.html'}}
{{=form}}
<script>
    jQuery(document).ready( function(){
        var flag=0
        jQuery('.web2py_form').submit(function(){
            //Getting value from taxpayer_name
            var get_name=jQuery('#taxpayer_name').val()
                if(get_name =="") {
                      if(flag==0) {
                          //Following are WORKING
                        //alert("Please Enter valid Name");
                        // jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo("#taxpayer_name__label");
                        //jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo(".w2p_fw");
                        // NOT WORKING
                          jQuery("<div class='error'>Please Enter Name</div></div>").appendTo("#taxpayer_name");
                              flag=1
                            }
                return false
                }
        });  
    });
</script>

As per your advice I opened firebug and found no errors ( I've attached screen shot)
But When I opened Web console It shows me one error as Empty string passed to getElementById().
If it works on other fields then why it should work in field also.


--
 
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/orFuJ3h2JxY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 



--
Thanks and Regards
Prasad M. Muley
Programmer at One Delta Synergies Pvt Ltd. [ Themis Group ] | PICT 2013

“Pretty much everything on the web uses those two things: C and UNIX,” - Dennis Ritchie
                               http://www.cs.bell-labs.com/who/dmr/        
FireBug.png
web_console.png

Prasad Muley

unread,
Jul 25, 2013, 7:39:34 AM7/25/13
to web...@googlegroups.com
has anybody got my question?


On Thu, Jul 25, 2013 at 2:30 PM, Prasad Muley <pmm...@gmail.com> wrote:
Hello Joe,
              I made a mistake while pasting. // working isn't there in updated code.
actual code is
{{extend 'layout.html'}}
{{=form}}
<script>
    jQuery(document).ready( function(){
        var flag=0
        jQuery('.web2py_form').submit(function(){
            //Getting value from tracker status
            var get_data=jQuery(this).html();
            var get_name=jQuery('#taxpayer_name').val()
                if(get_name =="") {
                      if(flag==0) {
                          //Following are working 
                        //alert("Please Enter valid Name");
                        // jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo("#taxpayer_name__label")
                        //jQuery("<div class='error'>Please Enter Valid Name</div>").appendTo(".w2p_fw")
                          jQuery("<div class='error'>Please Enter Name</div></div>").appendTo("#taxpayer_name");
                              flag=1
                            }
                return false
                }
        });  
    });
</script>
As per your advice I opened firebug and found no errors ( I've attached screen shot)
But When I opened Web console It shows me one error as Empty string passed to getElementById().
If it works on other fields then why it should work in field also.
On Thu, Jul 25, 2013 at 1:25 PM, Joe Barnhart <joe.ba...@gmail.com> wrote:

--
 
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/orFuJ3h2JxY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 
--
Thanks and Regards
Prasad M. Muley
Programmer at One Delta Synergies Pvt Ltd. [ Themis Group ] | PICT 2013

“Pretty much everything on the web uses those two things: C and UNIX,” - Dennis Ritchie
                               http://www.cs.bell-labs.com/who/dmr/        

Paolo Caruccio

unread,
Jul 25, 2013, 11:06:04 AM7/25/13
to
Please try;

jQuery("<div class='error'>Please Enter Name</div>").appendTo(jQuery("#taxpayer_name").parent());

or

jQuery("<div class='error'>Please Enter Name</div>").insertAfter("#taxpayer_name");

Your code fails because the div.error is created inside the input element

Prasad Muley

unread,
Jul 26, 2013, 1:07:39 AM7/26/13
to web...@googlegroups.com
Now it's Working.
Thank you for quick response.


On Thu, Jul 25, 2013 at 7:26 PM, Paolo Caruccio <paolo.ca...@gmail.com> wrote:
Please try;

jQuery("<div class='error'>Please Enter Name</div></div>").appendTo(jQuery("#taxpayer_name").parent());

or

jQuery("<div class='error'>Please Enter Name</div></div>").insertAfter("#taxpayer_name");

Your code fails because the div.error is created inside the input element

Il giorno giovedì 25 luglio 2013 13:39:34 UTC+2, Prasad Muley ha scritto:
Reply all
Reply to author
Forward
0 new messages