Question

我创建了一个包含表单的html网页。我将其链接到一个javascript文件，该文件告诉浏览器每当用户让他们清空字段时显示警报消息。 html结构如下：

<!DOCTYPE html>
<html>
<head>
    <title> title </title>
    <link rel="stylesheet" type="text/css" href="example.css">

</head>
<body>

    <h1>Modulo di richiesta informazioni</h1>

    <h2>Inserisci i tuoi dati:</h2>

    <form onsubmit="return validateForm()">

        <select name="status">
            <option value="Sig.">Sig.</option>
            <option value="Sig.ra">Sig.ra</option>
            <option value="Sig.na">Sig.na</option>
        </select>
        <br>

        <label>Nome:</label><br>
        <input type="text" name="name" id="name" value="scrivi il nome"><br>

        <label>Cognome:</label><br>
        <input type="text" name="surname" id="surname"><br>

        <label>email:</label><br>
        <input type="email" name="email" id="email">
        <br>


        <label>Numero di tel:</label><br>
         <input type="number" name="numero" id="numero">
         <br>

        <label>
        Inserisci la tua richiesta:</label>
        <br>
        <textarea name="commenti">Scrivi qui la tua richiesta:</textarea>
         <br>


        <label> Seleziona il servizio per il quale desideri richiedere informazioni:</label><br>

        <label> Chatbot</label>
        <input type="checkbox" name="Service" value="Chatbot">
        <label>Assistente virtuale</label>
        <input type="checkbox" name="Service" value="Assistente">
        <label> MySpoofer.it </label>
        <input type="checkbox" name="Service" value="MySpoofer">

        <br>


        <input type="submit" name="submit"> 
    </form>

    <script type="text/javascript" src="2_jsfile.js"></script>

</body>
</html>

与其链接的Javascript代码段如下：

function validateForm(){
    var x = document.getElementById('surname').value;
    if(x == ""){
        alert("Inserisci il cognome");
        return false;   
    } 
    var y = document.getElementById('email').value;
    if (y == "") {
        alert("Scrivi il tuo indirizzo e-mail");
        return false;
    }
    var z = document.getElementById('numero').value;
    if (z == "") {
        alert("Inserisci il tuo numero di telefono");
        return false;
    }

在 if if语句中，我想用以下JQuery方法替换alert方法以获得一条向用户显示消息的消息，但是它不起作用，因此我不确定这是一种有效方法：

    function validateForm(){
    var x = document.getElementById('surname').value;
    if(x == ""){
        $("<form>").html("Si prega di compilare i campi 
       con i dati richiesti");  
        return false;   
    } 
    var y = document.getElementById('email').value;
    if (y == "") {
        $("form").html("<div>Si prega di compilare i campi con i dati richiesti</div>");
        return false;
    }
    var z = document.getElementById('numero').value;
    if (z == "") {
        $("form").html("<div>Si prega di compilare i campi con i dati richiesti</div>");
        return false;
    }

}

如何使用JQuery而不是经典Javascript显示警报消息？

Answer 1

您可以根据需要使用jQuery UI对话框$( "#dialog" ).dialog();

 $( function() {
    $( "#dialog" ).dialog();
  } );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div id="dialog" title="Error Title">
  <p>The content error here.</p>
</div>
 
 
</body>
</html>

Answer 2

您也可以在没有jQuery UI的情况下进行验证。将您的验证功能更改为类似

function validateForm(){ 
 $('form div.msg').remove();
 var ret=0;
 $('#name,#surname,#numero').each(
  function(i,o){
    if (o.value==''){
     $(o).after('<div class="msg">'+o.id+': Si prega di compilare i campi con i dati richiesti</div>');
     ret++;
    }
  });
 return !ret
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Modulo di richiesta informazioni</h1>

    <h2>Inserisci i tuoi dati:</h2>

    <form onsubmit="return validateForm()">

        <select name="status">
            <option value="Sig.">Sig.</option>
            <option value="Sig.ra">Sig.ra</option>
            <option value="Sig.na">Sig.na</option>
        </select>
        <br>

        <label>Nome:</label><br>
        <input type="text" name="name" id="name" value="scrivi il nome"><br>

        <label>Cognome:</label><br>
        <input type="text" name="surname" id="surname"><br>

        <label>email:</label><br>
        <input type="email" name="email" id="email">
        <br>


        <label>Numero di tel:</label><br>
         <input type="number" name="numero" id="numero">
         <br>

        <label>
        Inserisci la tua richiesta:</label>
        <br>
        <textarea name="commenti">Scrivi qui la tua richiesta:</textarea>
         <br>


        <label> Seleziona il servizio per il quale desideri richiedere informazioni:</label><br>

        <label> Chatbot</label>
        <input type="checkbox" name="Service" value="Chatbot">
        <label>Assistente virtuale</label>
        <input type="checkbox" name="Service" value="Assistente">
        <label> MySpoofer.it </label>
        <input type="checkbox" name="Service" value="MySpoofer">

        <br>


        <input type="submit" name="submit"> 
    </form>

这将在每个目标输入字段下附加一个<div>和错误消息（如果发现为空）。在此之前，$('form div.msg').remove()会删除所有以前可能存在的错误消息。

编辑：

如果您真的想，可以使用.filter()而不是.each()进一步缩短上述功能，但结果可能不太可读：

function validateForm(){ 
 $('form div.msg').remove();
 return !$('#name,#surname,#numero')  // the ! negates the calculated length ...
   .filter((i,o)=>o.value==''                // is field empty?
      ? $(o).after('<div class="msg">'+o.id  // yes: place message!
                   +': Si prega di compilare i campi con i dati richiesti</div>')
      : false                                // no:  remove from jquery object
    ).length;  // length: number of empty fields
}

如何通过使用JQuery而不是Javascript显示警报消息？

2 个答案: