如果输入字段包含内容，则需要单选按钮

Question

I have aa reasonably quick problem to solve (I think). I have a form online and it validates the required content for the user's data, but has no validation on the first part of the form.

I've been asked however if I can make a radio button REQUIRED depending on whether an input field has been filled in.

The form can be found here: http://www.elcorteingles.pt/reservas/livros_escolares/form.asp

So if the person start's filling in the input fields on the first line, that the radio buttons in the group become REQUIRED (for either the CDROM ou CADERNO but not both)

Answer 1

You can handle the focusout and blur events for the input :

$(function () {
    // Handle every input type text.
    // To select specific inputs, give them a common class and change the
    // selector accordingly. 
    $("input[type=text]").on("focusout blur", function () {
        // Check for inputs with class radio_btns which are in
        // the parent element (li).
        // Set their required property. 
        $(this).parent().find("input.radio_btns")
            .prop("required", $(this).val().trim().length > 0);
    });
});

Demo

jQuery reference (Tree Traversal)

jQuery reference (.prop())

jQuery reference (.focusout())

jQuery reference (.blur())

Answer 2

$(document).ready(function(){

$(".titulo_books").each(function(){
      $(this).focus(function(){
        var radioChecked=0;
        var currElemId = parseInt($(this).attr('id'));
        var radioSelecterId = (currElemId>9)  ? currElemId : "0"+currElemId;
        $("input:radio[name="+radioSelecterId+"caderno]").each(function(){
        if(radioChecked==0)
        {
         radioChecked==1;
          $(this).attr("checked","checked");
        }
        });


      });
    });

});        

I have checked it by executing this from console on your site and it seems to work fine. You can alter this in the way you want. I have checked one of the four available radio button. User can change the input value if required. Or you can also change the default radio button selected through my code.

Answer 3

This will work. You can include the following JQuery code in the script tag, and also the JQuery cdn link in the head tag.

$(document).ready(function(){
    $('#01titulo').focusout(function(){
        if ($(this).val() !== "") {
           $('[name="01caderno"]').prop('required', true);
        } else {                          
            $('[name="01caderno"]').prop('required', false);
        }
        alert($('[name="01caderno"]').attr('required'));
    });
});