前のフィールドが正しく入力されている場合は、フォームフィールドをアクティブにします

debugcn 投稿 Dev

TNK

前のフォームフィールドに正しく入力されたら、フォームフィールドを1つずつアクティブにしたい。

これが私のフォームです-

<form>
    <div class="form-group">
        <label for="">First Name</label>
        <input type="text" class="form-control name" placeholder="First Name">
    </div>
    <div class="form-group">
        <label for="">Email address</label>
        <input type="email" class="form-control email" placeholder="Enter email" disabled>
    </div>    
    <div class="form-group">
        <label for="">Phone Number</label>
        <input type="text" class="form-control phone" placeholder="Enter Phone Number" disabled>
    </div>
    <div class="form-group">
        <label for="">Description</label>
        <textarea class="form-control description" rows="3" placeholder="Enter Your Description" disabled></textarea>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

ページが読み込まれるときにdisabled、最初のフォームフィールド（ここでは名）を除くすべてのフォームフィールドを保持したいと思います。名が正しく入力されている場合は、提出された電子メールをアクティブ化する必要があります。正しく入力されている場合は、次の名前をアクティブにする必要があります。

だから私はそれをこのようなもので試しました-

$('input.name').keyup(function () {
  if ($(this).val()) {
    $('input.email').removeAttr('disabled');
  } else {
    $('input.email').attr('disabled', true);
  }
});

それは電子メールでのみ機能します。だから私は他の人のためにもこれをどのように作るのか知りたいです。また、のprop()代わりに使用する方が良いと聞きましたattr()。

誰かがこれを行うための最良の方法は何ですか？

これは現在のコードのデモです

ありがとうございました。

ケープ

最初の仮定：シーケンス内のすべての要素にはクラス「シーケンス」があります。

2番目の仮定：各要素にはバリデーターが関連付けられており、値が正しい場合はクラス「valid」が割り当てられます。

$('.sequence').on('change blur', function(event) {
    if ($(event.target).hasClass('valid') {
        $(event.target).next('.sequence').removeAttr('disabled');
    }
});

デモ：

<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
    <form>
        <div class="form-group">
            <label for="">First Name</label>
            <input type="text" class="form-control name sequence" placeholder="First Name">
        </div>
        <div class="form-group">
            <label for="">Email address</label>
            <input type="email" class="form-control email sequence" placeholder="Enter email" disabled>
        </div>
        <div class="form-group">
            <label for="">Phone Number</label>
            <input type="text" class="form-control phone sequence" placeholder="Enter Phone Number" disabled>
        </div>
        <div class="form-group">
            <label for="">Description</label>
            <textarea class="form-control description sequence" rows="3" placeholder="Enter Your Description" disabled></textarea>
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>

    <script>

    function fakeValidator(event) {
        var $element = $(event.target);
        if ($element.val().length >= 3) {
            $element.addClass('valid');
        } else {
            $element.removeClass('valid');
        }
    }

    function enableNextElement(event) {
        var $element = $(event.target);
        if ($element.hasClass('valid')) {
            $element.closest('.form-group')
                .next('.form-group')
                .find('.sequence')
                .removeAttr('disabled');
        }
    }

    $(document).ready(function() {
        $('.sequence').on('change blur keyup', fakeValidator);
        $('.sequence').on('change blur keyup', enableNextElement);
    });

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

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]