Search code examples
javascriptjqueryhtmlonblur

Adding exceptions in blur event

I'm making a simple Multiple Choice Question form. I want to put validation that if a user clicks on Question <textarea> and clicks somewhere else on page while not entering value in <input type="text" name="q1_option1"> of options of the question, then the user should get an alert("Wait, you forgot to enter options for Question 1");. I tried doing it like this but it's simply not the thing that i want.
Here is the <html>

<div class="right">
  <div class="row" style="margin:5px;">
    <label><strong>Question 1</strong></label>
    <div>
      <textarea name="question1"></textarea>
    </div>
  </div>
  <div class="row">
    <div class="span-4"><input type="text" name="q1_option1" value="" class="q1" /></div>
    <div class="span-4"><input type="text" name="q1_option2" value="" class="q1" /></div>
    <div class="span-4"><input type="text" name="q1_option3" value="" class="q1" /></div>
    <div class="span-4"><input type="text" name="q1_option4" value="" class="q1" /></div>
    <div class="clear"></div>
  </div>
</div>

And this is <script>

<script type="text/javascript">
$(function(){
    $('textarea[name=question1]').blur(function(){ 
        $('.right').click(function(event) {
            if($(event.target).is('input[name=q1_option1]')) {

                $('#alert_error_message').text('Please enter all options in Question 1!!');
                callalert();
                return false;
            }
            else
            {
                alert('Not working!');
            }
        })
    })
})
</script>


Now what is happening in this code, when the user clicks on <input> to enter the options, blur is fired and user gets the alert.
What i want that if a user clicks on these <input> of answers, he should not get the alert, else, the user must get the alert for not entering values in the <input> of options!!

Solution

  • DEMO

    I came up with below approach and I will explain what I am doing with the below code. Check for the inline comments.

    $(function(){
    var hasFocus=false; //this variable is used to check whether focus was on textarea 
    //when clicked on document
    $('textarea[name=question1]').blur(function(event){ 
        setTimeout(function(){
            hasFocus=false; //on blur set the variable to false but after sometime
        },100);
    }).focus(function(){
       hasFocus=true; //on focus set it to true again
    });


    //A click event on document so that to display alert only if textarea had focus and the
    //targetted element is not radio button
    $(document).on('click',function(e){
      if($(e.target).attr('class')!='q1' && hasFocus && $(e.target).attr('name')!="question1") 
        {
            if(!$('.q1:checked').length) //if any radio has been checked
            {
                //if not checked then display alert
                alert('Please select an option');
            }
        }
    });
})