both required and optional input in hidden div

Question

I have a contact form like this

<form action="" method="POST">
<div>
  <fieldset>
    <p dir="rtl">
      <label>case1</label>
      <select id="Color" required="required">
        <option value="">please select</option>
        <option value="redd">sell</option>
        <option value="greenn">rent</option>
      </select>
    </p>
  </fieldset>
</div>
<div class="redd box">
   <input dir="rtl" type="text" name="pricerange" required />
     <input dir="rtl" type="text" name="room" />
</div>
<div class="greenn box">
   <input dir="rtl" type="text" name="rentrange" required />
  <input dir="rtl" type="text" name="morgage" />
</div>
<p dir="rtl"><input name="submit" type="submit" value="submit" /></p>
</form>

As you see I show or hide two div box "redd box" and "greenn box" based on the value which user select from drop down list in the beginning of the form. as you see I have required input and optional input in this div boxes. but when I select one of these divs I have to fill both required and optional fields otherwise I can not submit my form. any idea?Thanks

$(document).ready(function(){
    $("#Color").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="redd"){
                $(".box").not(".redd").hide().find("input").prop("required", false);
                $(".redd").show().find("input").prop("required", true);
            }
            else if($(this).attr("value")=="greenn"){
                $(".box").not(".greenn").hide().find("input").prop("required", false);
                $(".greenn").show().find("input").prop("required", true);
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

Really not clear what specific problem is. You have shown code but not explained what it is or isn't doing properly — charlietfl, Jul 06 '16 at 20:11
i add a new part to the question i can not understand it but one of my friends told me two days ago. i hope one of you can understand it — Malekian, Jul 06 '16 at 20:40
Maybe this whole thing stems from poor explanation of what `optional` means. Define `optional` in context of form shown. I interpret as the hidden fields — charlietfl, Jul 06 '16 at 20:57
i explain it again: if you notice i have a drop down list in first of my form it has two option: "sell" and "rent". if i select "sell" first div "class redd box" will be apear and if i select rent second div "class greenn box" will be apear. — Malekian, Jul 06 '16 at 21:06
now consider i select first option first div apears and if you notice it has two input one of them is required and one of them is not. but my javascript does not work well and i have to fill both of them otherwise i can not submit the form — Malekian, Jul 06 '16 at 21:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116618/discussion-between-user6362236-and-charlietfl). — Malekian, Jul 06 '16 at 21:08
OK...so you are setting required on both, only set it on `find("input").first()` — charlietfl, Jul 06 '16 at 21:12
i simplified my code here. my real contact form is really large and it has many input filed i can not do that — Malekian, Jul 06 '16 at 21:16
Could set a class then on optional and exclude it when setting `required` — charlietfl, Jul 06 '16 at 21:17

score 1 · Answer 1 · answered Jul 06 '16 at 20:13

1

Use .removeAttr('required') instead of .prop('required', false)

answered Jul 06 '16 at 20:13

Martin Hučko

791
5
16

hi thank you for your answering. i have a question : what about this part .prop("required", true) am i gonna replace this .removeAttr('required') in it too or not? – Malekian Jul 06 '16 at 20:18
1

I think that .prop('required", true) is ok – Martin Hučko Jul 06 '16 at 20:19
no still it does not work. and i have to fill both required and optional fields – Malekian Jul 06 '16 at 20:21
@user6362236 do you have any errors in console? Is form loaded by ajax after you call the change listener? Your code works as seen in demo I posted – charlietfl Jul 06 '16 at 20:22
@user6362236 oh, you want only first input in box to be required? You should select specific input by name`$(".redd").show().find("input[name=pricerange]").prop("required", true);` or just first `$(".redd").show().find("input").first().prop("required", true);` – Martin Hučko Jul 06 '16 at 20:32
user charlietfl hi i do not have any error. my form work properly as long as i fill both required and optional inputs. when i do not fill optional input it says please fill out this field – Malekian Jul 06 '16 at 20:32
user Martin Hučko hi thank you for your answering. i can not do this because i simplified my code in hear i have a lot of input filds. – Malekian Jul 06 '16 at 20:34
guys some days ago one of my friends told me a code but i can not handle it i add this code two question hope somebody can understand it – Malekian Jul 06 '16 at 20:37
So what do you want from us? Code works as intended. If you select every input in `.redd` and set them as required, you can't expect that the last one won't be required. So select only `.first()` input as I wrote above. :) – Martin Hučko Jul 06 '16 at 20:42
user Martin Hučko i can not do this because i simplified my code in hear i have a lot of input filds – Malekian Jul 06 '16 at 20:52

score 1 · Accepted Answer · answered Jul 07 '16 at 08:17

finally i got the answer thanks all of my friends who send their comments and answers to me.
the javascript must be change like this:

$(document).ready(function(){
    $("#Color").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="redd"){
                $(".box").not(".redd").hide().find('input').removeAttr('required');
                $(".redd").show();
            }
            else if($(this).attr("value")=="greenn"){
                $(".box").not(".greenn").hide().find('input').removeAttr('required');
                $(".greenn").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

also if we have a select option in divs the above javascrpt must change like bellow

$(document).ready(function(){
    $("#Color").change(function () {
        $(this).find("option:selected").each(function(){
            if($(this).attr("value")=="redd"){
                $(".box").not(".redd").hide().find('input,select').removeAttr('required');
                $(".redd").show();
            }
            else if($(this).attr("value")=="greenn"){
                $(".box").not(".greenn").hide().find('input,select').removeAttr('required');
                $(".greenn").show();
            }
            else{
                $(".box").hide();
            }
        });
    }).change();
});

Arashsoft · Answer 3 · 2016-07-06T20:48:25.447

0

Setting required to false is not acceptable in all browsers (As an example, Internet Explorer 8 does not support it). You need to remove the attribute.

 $(".box").not(".redd").hide().find("input").removeAttr('required');

and

 $(".box").not(".greenn").hide().find("input").removeAttr('required');

See this link for more information

edited Jul 06 '16 at 20:48

answered Jul 06 '16 at 20:18

Arashsoft

2,749
5
35
58

There is a difference between property and attribute. Setting property as Boolean is perfectly correct – charlietfl Jul 06 '16 at 20:19
@charlietfl, I do not get your point. So `required` is an "attribute" that op needs to remove it. – Arashsoft Jul 06 '16 at 20:24
My point is that the attribute also sets property of the dom element. So working directly with the property as OP is doing is perfectly acceptable. Look at demo link above I posted. Code shown in question works fine – charlietfl Jul 06 '16 at 20:25
Take `value` as example. When user changes value from what was in attribute...attribute doesn't change, only the property of the element does. That's why you work with that property to get/set value – charlietfl Jul 06 '16 at 20:27
Where did you come up with setting false is not supported? – charlietfl Jul 06 '16 at 20:54
@charlietfl Here is an example that refer to this issue: https://github.com/jzaefferer/jquery-validation/issues/301 – Arashsoft Jul 06 '16 at 20:56

AhmadReza Payan · Answer 4 · 2016-07-07T09:25:37.487

0

Edited

You can use .removeAttr('required')

Try this:

    $('form').on('submit',function(e){
        e.preventDefault()
        // TODO
        console.log('Form is submitted to the server');
    });

 $("#Color").change(function () {
        $(this).find("option:selected").each(function(){
            var val = $(this).attr("value");
            var box = $(".box");
            if(val=="redd"){
                box.not("." + val).hide().find("input").removeAttr('required');
                $("." + val).show().find("input").prop("required", true);
          }
         else if(val=="greenn"){
             box.not("." + val).hide().find("input").removeAttr('required');
             $("." + val).show().find("input").prop("required", true);
         }
         else{
            $(".box").hide();
       }
     });
}).change();

edited Jul 07 '16 at 09:25

answered Jul 06 '16 at 20:22

AhmadReza Payan

2,171
1
23
33

Thanks for attention :) But I think there is no need to old field names by doing this way. – AhmadReza Payan Jul 06 '16 at 20:32
Well OP would have to change back end then. That may not be an option. They clearly have different names in question – charlietfl Jul 06 '16 at 20:34
@charlietfl I did edited my answer. I would be happy to hear your opinion :) – AhmadReza Payan Jul 06 '16 at 20:49
thank you i checked your code. unfortunately my contat form is really large and i have many input in it. and it is just a simplified code in here. thus i want to make it automatically – Malekian Jul 06 '16 at 21:12
@user6362236 I edited the answer and hope this will help :) – AhmadReza Payan Jul 07 '16 at 09:27

both required and optional input in hidden div

4 Answers4