how to write javascript or jquery validation for below code in mvc4?

Question

I want to validate a TextBox as a required field if user checks any of the check boxes.

How do I validate the above requirement .Can anybody help?

Below is the View code snippet.

<div>
         <div id="">
            <input type="checkbox"  id="partsChk" name="partsChk"/><label      
            class="enrollment_side">
                Parts (including IRFs)
            </label>
        </div>


          <div id="">
            @Html.TextBox("PartsTitle","", new { @class = "enrollment_tbox", placeholder 
              = "Parts Contact Title (i.e. Parts Manager)" })


             <br />
            @Html.TextBox("PartsFirstName", "", new { placeholder = "First Name" })
            @Html.TextBox("PartsLastName","", new { placeholder = "Last Name" })
            @Html.TextBox("PartsEmpId","",  new { placeholder = "BMW Employee ID" })


            <br />

            </div>

             </div>


            <div>
         <div id="">
           <input type="checkbox" id="salesChk" name="salesChk" /><label  
        class="enrollment_sidehdr">Sales – Coming in Q3 2014
            </label>
        </div>


             <div id=""> 
        @Html.TextBox("SalesTitle","", new { @class = "enrollment_tbox", placeholder =  
        "Sales Contact Title (i.e. Sales Manager)" })

            <br />

          @Html.TextBox("SalesFirstName", "", new { placeholder = "First Name" })
            @Html.TextBox("SalesLastName","", new { placeholder = "Last Name" })
            @Html.TextBox("SalesEmpId","",  new { placeholder = "BMW Employee ID" })

        </div>

       </div>


     <div>
      <div id="">
       <input type="checkbox" id="serviceChk" name="serviceChk" /><label  
       class="enrollment_sidehdr">Service – Coming in Q3 2014
            </label>
        </div>


        <div id="">
           @Html.TextBox("ServiceTitle","", new { @class = "enrollment_tbox", 
        placeholder = "Service Contact Title (i.e. Service Manager)" })
            <br />

           @Html.TextBox("ServiceFirstName", "", new { placeholder = "First Name" })
            @Html.TextBox("ServiceLastName","", new { placeholder = "Last Name" })
            @Html.TextBox("ServiceEmpId","",  new { placeholder = "BMW Employee ID" })


            <br />

        </div>

         </div>

So you have multiple checkboxes related to each text field ? — IT ppl
– IT ppl, Commented Mar 13, 2014 at 7:44
Yes i have mutiple textboxes related to groups of textboxes.ie., for each group i have one checkbox — user3301440
– user3301440, Commented Mar 13, 2014 at 7:53

IT ppl · Accepted Answer · 2014-03-13 08:44:16Z

Please refer this sample code. I've written the HTML and jQuery code, Integrate it in your application

HTML

Group 1
<input type="checkbox"  id="1" class="cb"/>
<input type="text" class="txt1">
<input type="text" class="txt1">
    <br/>
    <br/>
Group 2
<input type="checkbox"  id="2" class="cb"/>
<input type="text" class="txt2">
<input type="text" class="txt2">
    <br/>
    <br/>
Group 3
<input type="checkbox"  id="3" class="cb"/>
<input type="text" class="txt3">
<input type="text" class="txt3">
    <br/><br/>
    <input type="button" id="button1" value="click me" />

jQuery

$("#button1").click(function(){
    $(".cb").each(function(){
        var flag = 0;
        if($(this).is(':checked'))
        {
            $(".txt" + $(this).attr("id")).each(function(){
                if($(this).val() == "")
                {
                    flag = 1;
                }
            });
            if(flag == 1)
            {
                alert("Fields of Group " + $(this).attr("id") + " are empty, Please fill it");
            }
        }
    });
});

Live demo here

Abhay Prince · Accepted Answer · 2014-03-13 09:52:20Z

If your naming convention is same as you wrote You can use following code ...

Change ids of your checkboxes to PartsChk, SalesChk and ServiceChk respectively. and then write following script

$('input[type=checkbox]').each(function(){
       if($(this).is(':checked')){
             var prefix=$(this).id.replace('Chk','');
             if($('#'+prefix+'Title').val()==''){
                    alert(prefix+'Title Field can not be left Empty');
                    $('#'+prefix+'Title').focus();
              }
              else if($('#'+prefix+'FirstName').val()==''){
                    alert(prefix+'FirstName Field can not be left Empty');
                    $('#'+prefix+'FirstName').focus();
              }
              else if($('#'+prefix+'LastName').val()==''){
                    alert(prefix+'LastName Field can not be left Empty');
                    $('#'+prefix+'LastName').focus();
              }
              else if($('#'+prefix+'EmpId').val()==''){
                    alert(prefix+'EmpId Field can not be left Empty');
                    $('#'+prefix+'EmpId').focus();
              }
       }
}

This JQuery code will give exactly what you want, It'll give alert if field is left blank if corressponding checkbox is checked and after that focus to the blank element..

Collectives™ on Stack Overflow

how to write javascript or jquery validation for below code in mvc4?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related