how to focus the required control using jquery

Question

0.00/5 (No votes)

See more:

hi all,

i have a large form. my form having 40 text box and 5 file uploads controls. only 20 text box are required and 1 file upload control is required.

my question is am enter the data in only 25 textboxes out of 40 textboxes. after then am click on the button. then automatically show and focus the required controls include fileupload controls also.

please help me. how to write jquery for validation script.

thanks and regards

Posted 21-Jan-13 0:33am

Santhosh23

Updated 21-Jan-13 0:35am

v2

Add a Solution

Comments

rizwan muhammed khan gouri 21-Jan-13 7:11am

Please give your come...for more Understanding

Kishor Deshpande 21-Jan-13 11:24am

Rather than having 40 text boxes, you can use Wizard control with validation for each wizard step.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

fjdiewornncalwe · Answer 1 · 2013-01-21T04:10:00

If I understand what you are doing, which I'm guessing at a bit because your question is a little vague, is that you have a page which has multiple groups of textboxes and fileupload controls that are tied together. i.e. a textbox and a fileupload control make up a group.
One way to do this to simplify the look of the page is to create these controls dynamically using javascript as the user requests them. That means to use a client side "Add New Item" concept. When a user clicks "Add new item", then javascript will create a new control group to the page dynamically. That way when you want to do validation before submit you can just validate all the controls on the page that exist rather than trying to have to figure out which ones are used and which ones aren't. To do this, you can check out these links[^] for examples.

Ruchin Munjal · Answer 2 · 2013-01-21T05:07:00

So if I understand this correctly, out of 40 text boxes 20 are mandatory and out of 5 uploads 1 is mandatory. If the text boxes and html inputs add a class say mandatory.
select all textboxes which are mandatory and loop through for text.

so say this is the tag:

HTML

<input type="text" class="mandatory" id="txtbx1" />
<input type="text" class="mandatory" id="txtbx2" />
<input type="text" class="mandatory" id="txtbx3" />
<input type="text" id="txtbx3" />

XML

<input type="text" class="uploadTextBox" id="upTtx" /><input type="button" value="Upload" onclick="FillTextBox();" />
      <input type="text" class="uploadTextBox" readonly="readonly" /><input type="button" value="Upload" onclick="FillTextBox();" />
      <input type="text" class="uploadTextBox" readonly="readonly" /><input type="button" value="Upload" onclick="FillTextBox();" />
      <input type="text" class="uploadTextBox" readonly="readonly" /><input type="button" value="Upload" onclick="FillTextBox();" />

<script>

      function Validate() {
          var areAllFieldsValidated = false;
          var isAtleastOneUploadAvailable=false;
          $('.mandatory').each(function () {
              //  debugger;
              if ($(this).val() == '') {
                  areAllFieldsValidated = false;
                  //$(this).addClass('ui-state-error'); //if you are using jQuery UI or you may add your own custom class
                  $(this).css({ 'background-color': 'Red' });
              }
              else {
                  $(this).css({ 'background-color': 'White' });//This is required so the red color is removed once user has fixed the errors and cick Submit again
                  areAllFieldsValidated = true;
              }

          });
          $('.uploadTextBox').each(function () {
              if ($(this).val() != '') {
                  isAtleastOneUploadAvailable = true;
              }

          });
          if (areAllFieldsValidated && isAtleastOneUploadAvailable)
          { alert('we are good'); }
          else if (!areAllFieldsValidated)
          { alert('Highlighted Fields missing') }
          else if (!isAtleastOneUploadAvailable) {
              $('.uploadTextBox').focus();
              alert('Upload at least one file.');
          }
  }


  </script>

This is on top of my head. Obviously it can be improved perhaps. You can also use some validation plugins to make life easier.

Hop this helps.

how to focus the required control using jquery

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0