CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
aiddev
aiddev

Reputation: 1429

can't make scroll to the first error message field

if(jQuery('.required_content').length){
  jQuery('.second_indiv_step_wrap').animate({scrollTop:jQuery('.required_content').first().offset().top - 96}, 'fast');
    }

Here is my fiddle

How you see I have a form and with js I am doign its validation, it is ok, my issue is connected with scrolling to the first error message every time when we will have empty input field. But seems code isn't working at all.

Upvotes: 0

Views: 1153

Answers (1)

Vinod Murukesan
Vinod Murukesan

Reputation: 231

As per your code in jsFiddle, You have used lot of in-line styles.

Also you don't have to write if condition for each field.

So I have Cleaned up the code.

And this works for me.

<!doctype html>
<html lang="en">
<head>
    <title>Form</title>
    <style type="text/css">
        .second_indiv_step_wrap {
            margin: 20px;
        }
        .second_indiv_step_wrap > div {
            margin:20px 0 0 0;
        }
        label {
            display:block;
        }
        input {
            display:block;
            width:250px;
        }
        textarea {
            display:block;
            width:250px;
            resize:none;
            height:200px;
        }
        .next_second {
            margin-top:20px;
            padding: 10px 15px;
            cursor:pointer;
            display:inline-block;
        }
        .required-field {
            border: 1px solid rgb(11, 75, 132);
            min-height: 52px;
            font-size: 18px;
            text-align: center;
            color: rgb(102, 102, 102);
            background: rgb(255, 255, 255);
        }
        .required_content, .error_x_white {
            display:none;
            color:rgb(244, 73, 68);
        }
        .show {
            display:block;
        }
        .error {
            border:0 none;
            background: rgb(244, 73, 68);
        }
    </style>
</head>
<body>
    <div class="second_indiv_step_wrap">

        <div class="surname">   
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="surname">Surname</label>
                <input type="text" name="Surname" id="surname" class="required-field">
            </div>  
            <span class="error_x_white">Please enter surname.</span>
        </div>

        <div class="firstname"> 
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="firstname">First Name</label>
                <input type="text" name="FirstName" id="firstname" class="required-field">
            </div>  
            <span class="error_x_white">Please enter first name.</span>
        </div>

        <div class="country_citizenship">   
            <span class="required_content">Required</span>
            <div class="fieldWrap placeholder-hide">
                <label for="autocomplete">Country</label>
                <input type="text" name="autocomplete" id="autocomplete" autocomplete="off" class="ui-autocomplete-input required-field">
            </div>  
            <span class="error_x_white">Please enter your country.</span>
        </div>

        <div class="residental_address">    
            <span class="required_content">Required</span>
            <div class="fieldWrap">
                <label for="pinrestextarea">Address</label>
                <textarea id="pinrestextarea" name="Principal residential address" class="required-field"></textarea>
            </div>  
            <span class="error_x_white">Please enter your address.</span>
        </div>

        <button class="next_second">Submit this form</button>

    </div>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $('.next_second').on('click', function () {

            $('.required-field').each(function () {

                if ($(this).val() == '') {
                    $(this).addClass('error');
                    $(this).parent().parent().find('.required_content').addClass('show');
                    $(this).parent().parent().find('.error_x_white').addClass('show');
                } else {
                    $(this).removeClass('error');
                    $(this).parent().parent().find('.required_content').removeClass('show');
                    $(this).parent().parent().find('.error_x_white').removeClass('show');
                }

            });

            setTimeout(function () {
                $('.second_indiv_step_wrap .error').first().focus();

                $('.error').unbind('keypress');
                $('.error').bind('keypress', function(){
                    $(this).removeClass('error');
                });
            }, 100);

        });

    </script>
</body>
</html>

Upvotes: 2

Related Questions