aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes Checking input values in form with JQuery Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Checking input values in form with JQuery" Watch "Checking input values in form with JQuery" New topic
Author

Checking input values in form with JQuery

Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I have a standard old html form. I want to see if all of the input fields are empty. If you try to submit a blank form you should get an error in the form of a pop up box saying that you must enter some search criteria.

Currently I have


But this only gives me the first input. I have 5 inputs...how do I do this to all of them without giving them all an ID and doing it explicitly that way. Isn't there a way to perform this on all of the inputs?

We do stuff to all <p> tags for example, $("p").click(//do something when any <p> is clicked on);

Thanks Bryce
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

The .attr() method can only return a single value, so it returns the value of the first matched element. So what you want to do is to attend to each matched element individually rather then en masse. To do that:

Will iterate over each matched element, invoking the passed function for each.

By the way, you probably want to be comparing to the empty string rather than null.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

P.S. You may also be interested in the jQuery Validation Plugin.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
I looked into using different form validation plugins but none of them meet my needs. I have 5 search fields and not all of the search combinations are valid. So lets say it looks something like this...

PO
Customer#
Job Name
Customer Name
Order Number

Well PO + Custmer# is valid, but PO and Customer Name is not. Order Number can ONLY be entered by itself. This is just an example.

There aren't any plugins out there that let you write rules like that. They pretty much only make rules as to what can go into a field, not really which fields can be used in conjunction with other fields...

So I think I'm stuck writing custom code for this one...
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

Most validators (included the liked one) allow you to specify custom validation functions. The primary benefit (at least to me) in using this plugin, is not the execution of the validation steps, but the management of the message list.

However, doing it on your own is equally valid. Goodness knows I've done it enough myself. I hope that my $().each() tip was helpful.
Bryce Martin
Ranch Hand

Joined: Nov 19, 2007
Posts: 269
Yes that tip was very helpful and I'm sure I'll use that knowledge some day. But for now I just stuck with my original non-jQuery way of doing it. Except I simplified 25 if/else statements down into 5. Much smaller and cleaner. I must have been drinking on the job when I originally wrote that about 3 months ago
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

You might also want to use $().val() as opposed to the more verbose $().attr('value')
[ April 17, 2008: Message edited by: Bear Bibeault ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

Here's a refactored version of your original. I'm not a big fan of alerts (as opposed to populating an on-page error list), but I'm assuming that's just a placeholder:

Hope that's helpful.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60045
    
  65

P.S. some significant notes on the re-factored example:
  • The form's submit event is captured rather than the submit button's click event -- this allows the validation to occur when the form is submitted via an Enter in one of the fields in addition to any submit button
  • Only input text fields are checked -- buttons, radios and checkboxes are ignored
  • $().each() is used to loop over all text input elements
  • $().val() is used
  • The values are checked against the empty string, not null


  • [ April 17, 2008: Message edited by: Bear Bibeault ]
    Bryce Martin
    Ranch Hand

    Joined: Nov 19, 2007
    Posts: 269
    Thanks for the tips and the refactored solution. Very clean and much better than the one I presented. I'll keep that in my back pocket as I just made my project available for pre-production testing.
     
    I agree. Here's the link: http://aspose.com/file-tools
     
    subject: Checking input values in form with JQuery
     
    Similar Threads
    JSP / Servlet upload images
    Losing data from submit using the enter key
    How to flow-layout 2 submit buttons
    Using createElement() to make a temp form to submit.
    Can't get RequestDispatcher forward() method or response.sendRedirect() to work