Question 35551 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery how to alter a text field after it is filled in?

I have two radio buttons, "Yes", and "No", and one text field. If a user clicks on "Yes", then the disabled text field is enabled and required. I would like the text field border to be red when required, and have created a class to do this. I have also created a class to make the the text field gray to be used after the field is populated. My question is in how to correctly apply the required class and then apply the validated class on the text field.

The solution I have below involves adding a function in the blur method, which seems to work. The issue is that if I then decide to click "No" and then click back on "Yes", the red border doesn’t show.

Any suggestions on how to solve this or how to optimize my code would be greatly appreciated. Thank you!

HTML

<input class="form-check-input radio" type="radio" name="radio" id="Yes" value="Yes" />
<label class="radio" for="Yes">Yes</label>
<input class="form-check-input radio" type="radio" name="radio" id="No" value="No" />
<label class="radio" for="No">No</label>
<br />
<label for="required_later">Enable if "Yes"</label>
<input type="text" name="textfield" id="textfield" placeholder="required" disabled>

CSS

.req {
    border: 1px solid red;
}

.valid {
    border: 1px solid #ced4da;
}

Jquery

$("#Yes").click(function() {
   $("#textfield").prop("required", true).addClass("req");
   $("#textfield").prop("disabled", false);
   $("#textfield").blur(function () {
        $("#textfield").addClass("valid");
   });
});
$("#No").click(function() {
  $("#textfield").prop("required", false).removeClass("req").val("");
    $("#textfield").prop("disabled", true);
});

Here is the JSFiddle: https://jsfiddle.net/L4529nzx/1/

Tags:

2

Answers


  1. 0

    I made it simpler

    The required and valid were clashing

    Looks like it works better now

    const $field = $("#textfield")
  .blur(function() {
  const req = $(".radio:checked").val() === "Yes"
  $(this).toggleClass("req", req);
  $(this).toggleClass("valid", req && this.value.trim() !== "");
});

$(".radio").on("click", function() {
  const yes = this.id === "Yes";
    $field
    .prop("required", yes)
    .prop("disabled", !yes)
    .toggleClass("req", yes)
    .toggleClass("valid", yes &&  $field.val().trim() !== "");
  if (!yes) $field.val("");
});
    .req {
  border: 1px solid red;
}

.valid {
  border: 1px solid #ced4da;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-check-input radio" type="radio" name="radio" id="Yes" value="Yes" />
<label class="radio" for="Yes">Yes</label>
<input class="form-check-input radio" type="radio" name="radio" id="No" value="No" />
<label class="radio" for="No">No</label>
<br />
<label for="required_later">Enable if "Yes"</label>
<input type="text" name="textfield" id="textfield" placeholder="required" disabled>
    Login or Signup to reply.
  2. 0

    this is what i came up with.

    function myFunc(par){
  if(par){
    $("#textfield").prop("required", true)
   $("#textfield").prop("disabled", false);
   $("#textfield").addClass("req");
  } else {
   $("#textfield").prop("required", false)
   $("#textfield").prop("disabled", true);
    $("#textfield").removeClass("req");
     $("#textfield").vlaue = '';
  }
}
function textFunc(){
  var inputValue = document.getElementById('textfield').value
  if(inputValue){
  document.getElementById('textfield').classList.add("valid");
  } else {
   document.getElementById('textfield').classList.remove("valid");
  }
}
    .req {
    border: 1px solid red;
}

.valid {
    border: 1px solid blue !important;
}
    <input class="form-check-input radio" type="radio" name="radio" id="Yes" value="Yes" onClick="myFunc(true)"/>
<label class="radio" for="Yes">Yes</label>
<input class="form-check-input radio" type="radio" name="radio" id="No" value="No" onClick="myFunc(false)"/>
<label class="radio" for="No">No</label>
<br />
<label for="required_later">Enable if "Yes"</label>
<input type="text" name="textfield" id="textfield" placeholder="required" disabled onChange="textFunc()">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search