javascript - Onclick 显示在输入字段中填充了目标值并进行正则表达式验证的 div

Question

我有这个Demo

HTML:

<form action="" method="POST" role="form" class="payment_form">
    <div class="contact_details">
        <p>SHARE YOUR CONTACT DETAILS</p>
        <div class="payment_details">
            <div class="form-group">
                <input type="text" class="input_name" id="fullName" pattern="^([a-zA-Z]+\s)*[a-zA-Z]+$" title="Type only characters" name="fullName" placeholder="FULL NAME" required/>
            </div>
            <div class="form-group">
                <input type="email" class="input_name" id="email" title="Eg: some@mail.com" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" placeholder="EMAIL ADDRESS" required/>
            </div>
            <div class="form-group">
                <input type="text" class="input_name" id="mobileNumber" maxlength="10" pattern="^(\+\d{1,3}[- ]?)?\d{10}$" title="Valid mobile number" placeholder="MOBILE ADDRESS" required/>
            </div>
        </div>
        <div class="contact_summary" style="display:none;">
            <h4>Name : <span id='fullName'></span></h4>
            <h4>Email : <span id='email'></span></h4>
            <h4>Mobile Number : <span id='mobileNumber'></span></h4>
        </div>
        <button type="submit" class="btn btn-default continue_btn">CONTINUE</button>
    </div>
</form>

JS:

$('.continue_btn').on("click", function(e) {
    $('.contact_summary').show();
    $('.payment_details').hide();
    $("#fullName").html(e.target.value);
    $("#email").html(e.target.value);
    $("#mobileNumber").html(e.target.value);
})

我想调用正则表达式验证 onclick。当我不使用 jquery 时它可以工作，但是当我添加 jquery 来隐藏 div 并显示输入字段中填写的值时，正则表达式验证不起作用，我无法获取输入中填写的详细信息 field 。例如，如果我填写名称输入，无论我在那里写什么名称，单击“继续”按钮，它应该隐藏输入字段并显示我在输入字段中写入的文本。谁能帮助并告诉我哪里出错了？

Answer 1

正如我在您的代码中看到的，您的按钮属于提交类型。这意味着当您单击时，表单数据将提交到服务器进行处理，并且您使用的表单方法是POST。而且您用来设置值的代码也不正确，因为 event.target 返回一个元素，即 启动事件的 DOM 元素。 如 official documentation 中所述。 .

所以你必须将代码更改为类似这样的

$('.continue_btn').on("click", function(e){
        e.preventDefault();
        $('.contact_summary').show();
        $('.payment_details').hide();

        var fullName = $("#fullName").val();
        var email = $("#email").val();
        var mobileNumber = $("#mobileNumber").val();

        $("#validatefullName").html(fullName);
        $("#validateemail").html(email);
        $("#validatemobileNumber").html(mobileNumber);
    });

或者你可以拥有这个

$('form').submit(function(e){
             e.preventDefault();
        $('.contact_summary').show();
        $('.payment_details').hide();

        var fullName = $("#fullName").val();
        var email = $("#email").val();
        var mobileNumber = $("#mobileNumber").val();

        $("#validatefullName").html(fullName);
        $("#validateemail").html(email);
        $("#validatemobileNumber").html(mobileNumber);
    });

我还注意到的另一件事是，表单中有两个具有相同 id 的元素。对于所有三个输入字段，其跨度具有相同的 id。根本不建议这样做。任何两个元素都不应该具有相同的 id，因为这可能会导致很多问题。这是updated fiddle