Question

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

此示例中的验证如下：如果用户输入和作为名字， jkp 输入姓氏并点击验证按钮，则document.write函数将成功打印提交表格。

＆＃13;

$( "#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");}
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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");}
});

in html

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

<强>样本：

＆＃13;

$( "#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");}
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

如果验证失败，您只需将event.preventDefault()添加到提交事件：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 4

未选中但您可以使用onchange（），更改事件发生在元素的值已更改时（仅适用于input，textarea和select元素）。 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");
   }
}

表单验证按钮，无需提交表单

4 个答案: