0

I have the following inside of our third part application, where I can write custom javascript or jquery code against the web pages, but I can not modify the markup:

<input id="OrderLiveOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0" type="checkbox">

I am trying to set the above input field, which is of type checkbox, as required now ( so I need to make sure that the user check the checkbox ). I tried this:

$('input[id^="OrderLiveOrder_"]').required;

based on this link https://www.w3schools.com/jsref/prop_checkbox_required.asp but it did not apply the validation. I also tried this:

 $('input[id^="OrderLiveOrder_"]').required = true;

but it did not fix the issue. So, can anyone advice on this?

Samvel Aleqsanyan
  • 2,812
  • 4
  • 20
  • 28
John John
  • 1
  • 72
  • 238
  • 501

3 Answers3

1

Use prop

$('input[id^="OrderLiveOrder_"]').prop("required", true);

or (also) by attr

$('input[id^="OrderLiveOrder_"]').attr("required", true);
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • Try `$('input[id^="OrderLiveOrder_"]').attr("required", "required")` as well, and share a working snippet that demonstrate your issue. – gurvinder372 Apr 25 '18 at 12:24
  • now using `$('input[id^="OrderLiveOrder_"]').prop("required", true);` will modify the markup as follow `` but did not add any validation. now one note i have is that the 3rd party application do not use HTML-5 could this be the reason ? – John John Apr 25 '18 at 12:41
  • @johnG It is difficult to tell without a working snippet.. please share the same. – gurvinder372 Apr 25 '18 at 13:48
1

Use attr("required",true) to set the required attribute of all the elements(in your case, checkbox) to true by using input[id^="OrderLiveOrder_"] query selector. To check the working of the below snippet you can use the browser's inspect element option on that checkbox.

$('input[id^="OrderLiveOrder_"]').attr("required",true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='checkbox' id='OrderLiveOrder_1'>1
<input type='checkbox' id='OrderLiveOrder_2'>2
<input type='checkbox' id='OrderLiveOrder_3'>3
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
  • now using `$('input[id^="OrderLiveOrder_"]').attr("required",true);` will modify the markup as follow ``but did not add any validation. now one note i have is that the 3rd party application do not use HTML-5 could this be the reason ? – John John Apr 25 '18 at 12:41
1

You can use both prop or attr to set the input as required.

Here is your input inside a working snippet:
(Try it by submitting before ticking the checkbox)

$('input[id^="OrderLiveOrder_"]').prop("required", true);
console.log($('input[id^="OrderLiveOrder_"]').attr("required"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input id="OrderLiveOrder_0e0052d6-9924-4774-b50d-d7ef364d744a_MultiChoiceOption_0" type="checkbox">
  <input type="submit">
</form>

prop and attr are basically the same.
Check the answer here: What is the difference between attribute and property?

Takit Isy
  • 9,688
  • 3
  • 23
  • 47
  • now your script will add the following attribute to the input field `required="required"` but did not add any validation.. – John John Apr 25 '18 at 12:42
  • @johnG What other validation do you need? The form can't be send if the checkbox is not ticked by the user. That's what you wanted according to your question. – Takit Isy Apr 25 '18 at 12:49
  • @johnG So… done. :) Try not to check and submit the form in my snippet. It won't! – Takit Isy Apr 25 '18 at 12:55
  • now in my case i am working on an ERP system which is a bit old, so not sure if it will understand something as follow `$('input[id^="OrderLiveOrder_"]').prop("required", true);` as usually inside the ERP system i can define a field as required from the the beginning using the admin screen, and there will not be any client side validation on the form, so after i submit the form i will get an error that the column is required,,, but in my case i want the checbox to be conditionally required using JavaScript...which is not working – John John Apr 25 '18 at 13:06
  • @johnG You should have put all that background information in your question at the beginning. Anyway, I don't understand. You say you want the checkbox to be conditionnaly required using Javascript, and in my snippet that's the javascript which adds the `required` property on the `checkbox`. So that's client-side. If there are some instructions we cannot use, please tell us. – Takit Isy Apr 25 '18 at 13:27
  • now there is not any instructions,, but i mean even when the required property is being set on the checkbox, i am able to submit the form without checking the checkbox... i am not saying there is any restriction, i am saying that this appraoch is not working on the ERP system.. – John John Apr 25 '18 at 22:46
  • @johnG Do you already have some JS working on the ERP? If yes, can you try to put the `disabled` property on the `submit`? Then, tell me if it does disable it, and I'll propose another solution. – Takit Isy Apr 26 '18 at 05:35
  • @johnG Do you *need* jQuery to achieve this? Is there already some working jQuery on your ERP clients? – Takit Isy Apr 26 '18 at 07:04