Question

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

Here is my fiddle

你怎么看我有一个表格和js我做了它的验证，没关系，我的问题是每当我们有空输入字段时滚动到第一个错误信息。但似乎代码根本不起作用。

Answer 1

根据你在jsFiddle中的代码，你已经使用了很多内嵌样式。

此外，您不必为每个字段撰写if condition。

所以我已经清理了代码。

这对我有用。

<!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>

无法滚动到第一个错误消息字段

1 个答案: