Javascript required HTML attribute

Asked

Viewed 4,079 times

3

I’d like to know how to do that, when the activeBtn were checked, the ordenadorBanners win the attribute required, I tried the model below but it didn’t work, I would like to know how to do it, and the "why" of having to do it in such a way.

var $activeBtn = document.getElementById('btn-ativa');
var $ordenadorBanners = document.getElementById('ordem-banner');

if ($activeBtn.checked) {
   $ordenadorBanners.required = true;
}

<form>
    <fieldset>
        <input type="number" name="" min="1" max="10" id="ordem-banner" pattern="">
        <label class="switch">
            <input type="checkbox" id="btn-ativa">
            <div class="slider round"></div>
            </label>
    </fieldset>
    <fieldset>
        <input type="submit" name="" value="Cadastrar">
    </fieldset>
</form>
javascript html attributes

  • Put your html code too.

  • Use the prop, as follows: $ordenadorBanners.prop('required', true); and after adding the required and the user take the check of $activeBtn use the .removeAttr('required');

  • didn’t work :/

2 answers

6


You need to add an event headset to know when it’s clicked or not.

And then you can use the property .required element or set directly in HTML with setAttribute.

Example:

var activeBtn = document.getElementById('btn-ativa');
var ordenadorBanners = document.getElementById('ordem-banner');
activeBtn.addEventListener('change', function() {
    ordenadorBanners.required = this.checked;
});

Or so:

if (this.checked) ordenadorBanners.setAttribute('required', 'required');
else ordenadorBanners.removeAttribute('required', 'required');

jsFiddle: https://jsfiddle.net/9y7282dg/

Notes:

  • did not use the $ in the name of variables because in Javascript this is not usual. Only to give names to variables that are jQuery objects or other libraries
  • places this code at the end of <body> or within a function that is called when the DOM is loaded and the HTML is read.

2

You can solve your problem like this:

<form>
    <fieldset>
        <input type="number" name="" min="1" max="10" id="ordem-banner" pattern="">
        <label class="switch">
            <input type="checkbox" id="btn-ativa" onclick="checkedBtnAtiva()">
            <div class="slider round"></div>
        </label>
    </fieldset>
    <fieldset>
        <input type="submit" name="" value="Cadastrar">
    </fieldset>
</form>

<script type="text/javascript">
    checkedBtnAtiva();
    function checkedBtnAtiva(){
        var $activeBtn = document.getElementById('btn-ativa');
        var $ordenadorBanners = document.getElementById('ordem-banner');
        if ($activeBtn.checked) {
            $ordenadorBanners.required = true;
        }else{
            $ordenadorBanners.required = false;
        }
    }
</script>

Doing so you will get the check if this checked or not even after charging the html.
Remember that you must put the script after the html in which he will work. Preferably at footer.
I hope I’ve helped.

Browser other questions tagged javascript html attributes

You are not signed in. Login or sign up in order to post.