Question

我有以下问题：

当我的表单中的输入有错误（不匹配模式，空或不匹配其他输入）时，我试图混合一些跨度。

我尝试了一些不同的代码，但似乎都没有。这就是我现在所拥有的。

就这样你们都知道..考虑到javascript或Jquery，我就是那个小伙子。

var help_text_pw1 = $('.help-text-password1');
var help_text_pw1_toggle = $('#help-text-pw1');

help_text_pw1_toggle.on("click", function(e) {
    help_text_pw1.slideToggle();
});

var help_text_pw_confirm = $('.help-text-password-confirm');
var help_text_pw_confirm_toggle = $('#help-text-pw1-confirm');

help_text_pw_confirm_toggle.on("click", function(e) {
    help_text_pw_confirm.slideToggle();
});

var help_text_credit_card = $('.help-text-credit-card');
var help_text_credit_card_toggle = $('#help-text-credit-card');

help_text_credit_card_toggle.on("click", function(e) {
    help_text_credit_card.slideToggle();
});


var password = $('#password1');
var confirm_pw = $('#password-confirm1');
var submit = $('button[type="submit"]');
var credit_card_number = $('credit-card-number1');
var form = $('#main-form');

$(document).ready(function() {
  submit.click(function(event){

    data = password.val();
    var len = data.length;

    if (password.error()) {
        $(function() {
            help_text_pw1.slideDown();
        });
    }

    if (confirm_pw.error()) {
        $(function() {
            help_text_pw_confirm.slideDown();
        });
    }

    if (credit_card_number.error()) {
        $(function() {
            help_text_credit_card.slideDown();
        });  
    }  

    if (password.val() != confirm_pw.val()) {
        confirm_pw.css('border', '2px solid red');
        alert("Password and Confirm Password don't match");
        // Prevent form submission
        event.preventDefault();
    } 
  });
});

如果需要，这里是HTML。

<form id="main-form" method="post">
        <fieldset>
            <legend>COMPLEX</legend>

            <label for="password1">Password</label>
            <input type="password" placeholder="password" name="password" id="password1" required pattern="(((?=.*\d)|(?=.*\\\|\/\+\.))(?=.*[a-z])(?=.*[A-Z]).{8,})[A-Za-z0-9\\\/\|\+\.]">

            <input type="checkbox" id="pwShow">
            <label class="pwShow" for="pwShow">Show Password</label>
            <div class="help-text" id="help-text-pw1" title="Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ | / + . ].">password help</div>
            <span class="help-text-password1">Your password must have at least 8 digits, 1 capital letter and 1 number or 1 special symbol like [ \ | / + . ].</span>

            <label for="password-confirm1">Confirmation</label>
            <input type="password" placeholder="confirm password" name="password-confirm" id="password-confirm1" required>
            <div class="help-text" id="help-text-pw1-confirm" title="This field must match the password entered above.">confirm password help</div>
            <span class="help-text-password-confirm">This field must match the password entered above.</span>

            <label for="credit-card-number1">Credit Card</label>
            <input type="text" placeholder="4111 1111 1111 1111" name="credit-card-number" id="credit-card-number1" required pattern="[0-9]{13,16}">
            <div class="help-text" id="help-text-credit-card" title="Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'">card number help</div>
            <span class="help-text-credit-card">Enter a valid credit card number like: '4324 1265 2431 5456' or '1221 5356 4234 1'</span>

            <button class="form-btn" type="submit">Submit</button>
        </fieldset>
    </form>

提前致谢！

Answer 1

将click事件更改为submit事件

 $(document).ready(function() {
  $("#main-form").submit(function(event){

    data = password.val();
    var len = data.length;

    if (password.val() != confirm_pw.val()) {
        confirm_pw.css('border', '2px solid red');
        alert("Password and Confirm Password don't match");
        // Prevent form submission
        event.preventDefault();
    }

    if (password.error()) {
        $(function() {
            help_text_pw1.slideDown();
        });
    }

    if (confirm_pw.error()) {
        $(function() {
            help_text_pw_confirm.slideDown();
        });
    }

    if (credit_card_number.error()) {
        $(function() {
            help_text_credit_card.slideDown();
        });  
    }   
  });
});

Answer 2

好的，经过很多个小时我才开始工作。

我只是用这个：

$(function() {
    password.on('invalid', function(event) {
        help_text_pw1.slideDown();
        $(this).css('border', '1px solid red');
    });
    confirm_pw.on('invalid', function(event) {
        help_text_pw_confirm.slideDown();
        $(this).css('border', '1px solid red');
    });
    credit_card_number.on('invalid', function(event) {
        help_text_credit_card.slideDown();
        $(this).css('border', '1px solid red');
    });
});

现在，如果有任何错误（无论出现什么样的错误），都会调用代码。

输入字段有错误时执行事件

2 个答案: