Using Jquery to set required based on input value

Question

I want to change the required attribute of an HTML input if the value of another input is larger than 8. (without submitting anything)

<input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">

Basically if the value of inputCheck is larger than 8, set rquired of inputReact to true. I know how to change the attribute, problem is checking the value without submitting.

Anurag Srivastava · Accepted Answer · 2020-03-08 09:38:01Z

1

You can use the input listener

let checkBox = document.getElementById("inputCheck")
, textBox = document.getElementById("inputReact")

checkBox.addEventListener("input", evt => {  
  if(evt.target.value > 8) textBox.setAttribute("required", true)
  else textBox.removeAttribute("required")
})

<input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">

answered Mar 8, 2020 at 9:38

Anurag Srivastava

14.5k4 gold badges39 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jatinder Pal Singh · Accepted Answer · 2020-03-08 09:42:45Z

0

Add a change event listener to the required input field.

$('#inputCheck').change(function() {
    const value = $(this).val();
    const rInput$ = $('#inputReact');
    if(value > 8) { // could also use parseInt(value) to convert value into number if it isn't already.
        rInput$.attr('required', true); 
    } else {
        rInput$.removeAttr('required');
    }
});

answered Mar 8, 2020 at 9:42

Jatinder Pal Singh

2362 silver badges11 bronze badges

2 Comments

Jatinder Pal Singh Over a year ago

cool, however you requested answer in jquery and accepted a pure JS answer :) just saying, no hard feelings.

noodleparty Over a year ago

It was the first one to come so I just accepted it, never posted before. I‘ve used yours though.

LDS · Accepted Answer · 2020-03-08 09:55:32Z

0

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>keydown demo</title>
 
  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
 
<form>
 <input id="inputCheck" name="inputCheck" placeholder="" required="true" value="" type="number">
<input id="inputReact" name="inputReact" placeholder="" required="false" value="" type="text">
</form>

 
<script>
var xTriggered = 0;
$(document).ready(function()
{
alert("ok");
$( "#inputCheck" ).keydown(function( event ) {

 var myLength = $("#inputCheck").val().length;

if((myLength+1) > 8)
{

$("#inputReact").attr("required","true");
}
});
 
});
</script>
 
</body>
</html>

answered Mar 8, 2020 at 9:55

LDS

3623 silver badges9 bronze badges

Collectives™ on Stack Overflow

Using Jquery to set required based on input value

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related