with localstorage value field from the first page i shouldn't validated some field in the second page using jquery validation plugin

Question

This question is continue with my previous question localstorage In the first page if the user select second radio button and click submit button in the second page I have four text field where I have to validate only two text field using jquery validate.

Here is the first page

    <!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <title>First page</title>
</head>
<body>
 <form id="first_pge" class="first_pge" action="second.page">
  <input type="radio" name="radio" id="ug"/>
  <input type="radio" name="radio" id="pg"/>
  <input type="radio" name="radio" id="cu"/>
  <input type="button" value="submit" id="btn_sub"/>
  </form
</body>
</html>

Here is the second page code

    <html>

 <head>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
    <script>
            jQuery.validator.setDefaults({
                    debug: true,
                    success: "valid"
            });
            $("#myform").validate({
                    rules: {
                            field: {
                                    required: true
                            }
                    }
            });
    </script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
            .div_panel {
                    background-color: yellow;
                    font-size: 16px;
            }
    </style>
 </head>
 <body>
    <form id="myform" class="myform">
            <div class="div_panel">First</div>
            <div>&nbsp</div>
            <input type="text" id="field" class="local_Field" name="local_Field" />
            <input type="text" id="field_1" class="local_Field" name="local_Field" />
            <input type="text" id="field" class="local_Field" name="local_Field" />
            <input type="text" id="field_1" class="local_Field" name="local_Field" />
            <input type="button" required value="Submit" id="btn_sub1" />
    </form>
   </body>
 </html>

First page jquery localstorge code

function assignValue() {
                var checkedRadioValue = -1;
                if (document.getElementById("ug").checked)
                {
                    checkedRadioValue = 1;
                }
                else if(document.getElementById("pg").checked)
                {
                    checkedRadioValue = 2;
                }
                else if(document.getElementById("cu").checked)
                {
                    checkedRadioValue = 3;
                }
                //localStorage.setItem("CheckedRadioValue", checkedRadioValue);
                localStorage.setItem("CheckedRadioValue", checkedRadioValue);
          }
        assignValue();

this is what i have in the second page jquery code

$(document).ready(function(){
 //var checkedRadioValue = parseInt(localStorage.getItem("CheckedRadioValue"));
    var checkedRadioValue = parseInt(localStorage.getItem("CheckedRadioValue"));
    if (checkedRadioValue != -1) {
        if (checkedRadioValue === 3) {
            //$("#edu_info").hide();
            //$('.local_Field,.txt_ara').removeClass('required_Field');
            $(".myform").validate({
               ignore: ".local_Field"                    
            });
           
        }
      /*  if (checkedRadioValue === 2) {
          
        }*/
        sessionStorage.removeItem("CheckedRadioValue");
    }
    });

I have tried using ignore in jquery validator but still no use kindly please help me.

Kindly please help me

Thanks in advance

You cannot call the `.validate()` method twice on the same page. It can only be called once to initialize the plugin and the second instance is ignored. This is why you cannot set the `ignore` option within your conditional. Instead of using `ignore` option, use the `.rules('add')` and `.rules('remove')` methods, which are dynamic. — Sparky, Nov 02 '15 at 14:30
For the testing purpose I have put but normally I am not doing like that once again sorry — Mr.M, Nov 02 '15 at 14:45
It does not matter if you're only testing; it will fail if you're trying to call `.validate()` more than one time. The plugin will always ignore the second instance. — Sparky, Nov 02 '15 at 14:50
Could you please guide me how to do this if actually there are two pages user can open second page directly or he can come from first page if user come from first page the corresponding fields should not get validated but if the user open second page all fields has to validate I am too much confused here kindly help me — Mr.M, Nov 02 '15 at 14:54
Hi @sparky I am extremely sorry iam on the way the Internet signal was very low here once I reached home I will try — Mr.M, Nov 02 '15 at 15:39
Please don't post comments begging for help. I'll answer this question if or when I have some free time. — Sparky, Nov 02 '15 at 16:24
Sorry @Sparky i have tried as per your suggestion I have assigned common css class name for all the fields and i am trying like this $( ".local_Field" ).rules("remove", "required"); when i click the submit button it was happening only for the first field not for all :( — Mr.M, Nov 02 '15 at 18:22
I tried this way this working but $('[name*="text_1"]').each(function() { $(this).rules("remove", "required"); }); but when i open the html page seperately that this feild or not working can you guide me what i am doing wrong — Mr.M, Nov 02 '15 at 18:32

score 0 · Answer 1 · edited May 23 '17 at 12:03

I got the answer for the above question I have taken Idea from Sparky solution in one of the SO

Thanks sparky this was working fine

var checkedRadioValue = parseInt(localStorage.getItem("CheckedRadioValue"));
    if (checkedRadioValue != -1) {
        if (checkedRadioValue === 3) {

            $("#edu_info").hide();

           // $('.local_Field').removeClass('required_Field');
            $('.local_Field ').each(function() {
                $(this).rules("remove","required");
            });

        }else{
            $('.local_Field ').each(function() {
                $(this).rules("add","required");
            });
        }

        localStorage.removeItem("CheckedRadioValue");
    }
  });

@Sparky can you check the below code is correct or do we need any modification though it was working currently with this code

@Sparky thank you for much for this $(this).rules("remove","required"); it really helping in all the area :) — Mr.M, Nov 03 '15 at 14:18

with localstorage value field from the first page i shouldn't validated some field in the second page using jquery validation plugin

1 Answers1