不提交表单的表单验证按钮

Question

我有一个表单，我想在不提交该表单的情况下检查验证（如果输入正确）。这怎么可能？

本例中的验证如下： 如果用户输入 and 作为名字，输入 jkp 作为姓，然后点击 validate 按钮，document.write 函数将打印成功，而没有提交表单。

$( "#myform" ).submit(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
 
 if(name === "and" && lname ==="jkp")
 {document.write("Correct answer");}

 else{document.write("Incorrect answer");}
});

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">


    </select>
       <input type="submit" value="Submit">
        <input style="background:red" type="submit" value="Validate">
  </form>

Answer 1

验证但不是提交类型

我所做的更改：

在js中

$( "#vali" ).click(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
 $('#fname, #lname').css({
        'color' : 'red'
    });
 if(name === "and" && lname ==="jkp")
 {alert("Your answers are correct!");}
 else{alert("Your answer is not correct");}
});

在html中

<input id="vali" style="background:red" type="button" value="Validate">

演示：

$( "#myform" ).submit(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
 
 if(name === "and" && lname ==="jkp")
 {alert("Your answers are correct!");}
 else{alert("Your answer is not correct");}
});

$( "#vali" ).click(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
  $('#fname, #lname').css({
            'color' : 'red'
        });
 if(name === "and" && lname ==="jkp")
 {alert("Your answers are correct!");}
 else{alert("Your answer is not correct");}
});

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
#vali{

    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}


input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">


       <input type="submit" value="Submit">
        <input id="vali" style="background:red" type="button" value="Validate">
  </form>

Answer 2

您也可以尝试 AJAX 请求，假设您将在服务器端进行验证，同时对客户端隐藏业务逻辑。 另一种解决方案是创建一个用于验证的 javascript 方法，该方法在焦点丢失/key up 后调用，该方法通过元素的 id 获取元素并将它们传递给此函数。

Answer 3

如果验证失败，您可以简单地将event.preventDefault() 添加到提交事件中：

$( "#myform" ).submit(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();
 
 if(name === "and" && lname ==="jkp") {
     alert("Success");
 }
 else {
    event.preventDefault();
    alert("failed");
 }
});

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

div {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" action="#">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">


    </select>
       <input type="submit" value="Submit">
        <input style="background:red" type="submit" value="Validate">
  </form>

Answer 4

未勾选，但可以使用 onchange()， 当元素的值发生变化时会发生 change 事件（仅适用于 input、textarea 和 select 元素）。 change() 方法触发 change 事件或附加一个函数以在 change 事件发生时运行。

$( "#myform" ).change(function( event ) {
 var name = $("#fname").val();
 var lname = $("#lname").val();

 if(name === "and" && lname ==="jkp"){
    alert("Your answers are correct!");
 }
     else{ 
   alert("Your answer is not correct");
   }
}