Fatal编程技术网
  • javascript/
  • Javascript 如何验证数据库生成的问卷

Javascript 如何验证数据库生成的问卷

javascript jquery node.js validation

Javascript 如何验证数据库生成的问卷,javascript,jquery,node.js,validation,material-design,Javascript,Jquery,Node.js,Validation,Material Design,我在node.js中有从数据库生成的问卷，现在问题可以是任意类型的“多选、单选、是非和文本”验证，应该很容易检查是否每个问题都已回答。 我知道如何验证表单，但问题是我的表单有名称、姓氏和电子邮件对话框，所以我需要在按钮id=“show dialog”上的jQuery/javascript中验证第一部分，以及在第二个按钮上验证我的名称、姓氏和电子邮件对话框 我的视图（start.ejs）如下所示： <!DOCTYPE html> <html> <head>

我在node.js中有从数据库生成的问卷，现在问题可以是任意类型的“多选、单选、是非和文本”验证，应该很容易检查是否每个问题都已回答。 我知道如何验证表单，但问题是我的表单有名称、姓氏和电子邮件对话框，所以我需要在按钮
id=“show dialog”
上的jQuery/javascript中验证第一部分，以及在第二个按钮上验证我的名称、姓氏和电子邮件对话框

我的视图（start.ejs）如下所示：

    <!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script
            src="https://code.jquery.com/jquery-3.2.1.min.js"
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>
</head>
<body>

<h1><%= title %></h1>
<form name="questionsForm" id="questionsForm" method="post" action="/save">
<% pitanja.forEach(function(pitanje) { %>
    <input type="hidden" name="pitanje_id" value="<%= pitanje.id %>" >
    <input type="hidden" name="upitnik_id" id="upitnik" value="<%= pitanje.upitnik_id %>" >
<% switch (pitanje.tip_pitanja_id) {
    case 1: %>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-card__supporting-text">
<h4> <%= pitanje.tekst %> </h4>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="odgovor_tekst" name="<%= pitanje.id %>">
    <label class="mdl-textfield__label" for="odgovor_tekst">Tekst...</label>
</div>
</div>

<% break; %>
<% case 2: %>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-card__supporting-text">
    <h4> <%= pitanje.tekst %> </h4>
<ul class="demo-list-control mdl-list">
    <li class="mdl-list__item">
         <span class="mdl-list__item-primary-content">
        <label>Da</label>
             </span>
        <span class="mdl-list__item-secondary-action">
            <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-yes">
        <input  id="list-option-yes" class="mdl-radio__button" type="radio" name="<%= pitanje.id %>" value="true">
            </label>
        </span>
    </li>

    <li class="mdl-list__item">
         <span class="mdl-list__item-primary-content">
        <label>Ne</label>
             </span>
        <span class="mdl-list__item-secondary-action">
            <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-no">
        <input  id="list-option-no" class="mdl-radio__button" type="radio" name="<%= pitanje.id %>" value="false">
            </label>
        </span>
    </li>
</ul>
</div>

<% break; %>
<% case 3: %>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-card__supporting-text">
<h4> <%= pitanje.tekst %> </h4>
<ul class="demo-list-control mdl-list">
    <% odgovori.forEach(function(odgovor) { %>
    <% if(pitanje.id == odgovor.pitanje_id){ %>

    <li class="mdl-list__item">
        <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-<%= odgovor.id %>">
            <input type="checkbox" id="checkbox-<%= odgovor.id %>" name="<%= pitanje.id %>"   value="<%= odgovor.tekst %>" class="mdl-checkbox__input">
            <span class="mdl-checkbox__label"><%= odgovor.tekst %></span>
        </label>
    </li>
    <% }%>
    <% }); %>
</ul>
</div>
<% break; %>
<% case 4: %>
<div class="mdl-card mdl-cell mdl-cell--12-col mdl-card__supporting-text">
<h4> <%= pitanje.tekst %> </h4>
<ul class="demo-list-control mdl-list" >
    <% odgovori.forEach(function(odgovor) { %>
    <% if(pitanje.id == odgovor.pitanje_id){ %>

    <li class="mdl-list__item">
         <span class="mdl-list__item-primary-content">
        <label><%= odgovor.tekst %></label>
             </span>
        <span class="mdl-list__item-secondary-action">
            <label class="demo-list-radio mdl-radio mdl-js-radio mdl-js-ripple-effect" for="list-option-<%=odgovor.id%>">
        <input  id="list-option-<%=odgovor.id%>" class="mdl-radio__button" type="radio" name="<%= pitanje.id %>" value="<%= odgovor.tekst %>">
            </label>

        </span>
    </li>
    <% }%>
    <% }); %>
</ul>
</div>
<% break; %>
<% } %>
<% }); %>  
</br> 
<button id="show-dialog" type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent">Sačuvaj</button>
<dialog class="mdl-dialog">
    <h4 class="mdl-dialog__title">Unesite vaše podatke</h4>
    <div class="mdl-dialog__content">

        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="ime" name="ime">
            <label class="mdl-textfield__label" for="ime">Ime</label>
            <span class="mdl-textfield__error">Greška!</span>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="prezime" name="prezime">
            <label class="mdl-textfield__label" for="prezime">Prezime</label>
            <span class="mdl-textfield__error">Greška!</span>
        </div>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input class="mdl-textfield__input" type="text" id="email" name="email">
            <label class="mdl-textfield__label" for="email">Email</label>
            <span class="mdl-textfield__error">Greška!</span>
        </div>
    </div>
    <div class="mdl-dialog__actions">
        <input type="submit" value="Spremi" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored pull" >
        <button type="button" class="mdl-button close">Prekini</button>
    </div>
</dialog>   
</form>  
<script>
    var dialog = document.querySelector('dialog');
    var showDialogButton = document.querySelector('#show-dialog');
    if (! dialog.showModal) {
        dialogPolyfill.registerDialog(dialog);
    }
    showDialogButton.addEventListener('click', function() {
        dialog.showModal();
    });
    dialog.querySelector('.close').addEventListener('click', function() {
        dialog.close();
    });
</script> 
</body>
</html>
javascript中的解决方案如下：

var dialog = document.querySelector('dialog');
if (! dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
}
dialog.querySelector('.close').addEventListener('click', function() {
    dialog.close();
});
function validateQue() {
var questions=document.getElementsByClassName("que");
var countValid=0;
for(var i=0;i<questions.length;i++){
    var inputs=questions[i].getElementsByTagName("input");
    var id = questions[i].id.replace('que','');
    var lbl = document.getElementById('lbl'+id);
    for(var j=0;j<inputs.length;j++){
        var isAnswered = false;
        if(inputs[j].type=="radio"){
            if(inputs[j].checked)
            {
                isAnswered=true;
                break;
            }
        }
        if(inputs[j].type=="checkbox"){
            if(inputs[j].checked)
            {
                isAnswered=true;
                break;
            }
        }
    }
    var textarea=questions[i].getElementsByClassName("text");
    for(var k=0;k<textarea.length;k++){
        if(textarea[k].value==null ||textarea[k].value=="" || textarea[k].value.trim().length==0)
        {
        }else {
            isAnswered=true;
        }
    }
    if(isAnswered==true){
        countValid++;
        if(lbl!=null) {
            lbl.innerText = "";
        }
    }else{
        if(lbl!=null) {
            lbl.innerText = "*";
        }
    }
}
if(countValid==questions.length){
    dialog.showModal();
}else {
}
}
function validateUser() {
    var ime=document.getElementById("ime");
    var prezime=document.getElementById("prezime");
    var email=document.getElementById("email");
    var ime_error = document.getElementById("ime_error");
    var prezime_error = document.getElementById("prezime_error");
    var email_error = document.getElementById("email_error");
    var countValid=0;
    if(ime.value==null ||ime.value==""|| ime.value.trim().length==0)
    {
        ime.parentElement.className += ' is-invalid';
        ime_error.innerText="Ime je obavezno polje";
    }else {
        ime.parentElement.className.replace(' is-invalid','');
        ime_error.innerText="";
        countValid++;
    }
    if(prezime.value==null ||prezime.value=="" || prezime.value.trim().length==0)
    {
        prezime_error.innerText="Prezime je obavezno polje";
        prezime.parentElement.className += ' is-invalid';
    }else {
        prezime.parentElement.className.replace(' is-invalid','');
        prezime_error.innerText="";
        countValid++;
    }
    if(email.value==null ||email.value==""|| email.value.trim().length==0)
    {
        email.parentElement.className += ' is-invalid';
        email_error.innerText="E-mail je obavezno polje";
    }else {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))
        {
            email_error.innerText="";
            email.parentElement.className.replace(' is-invalid','');
            countValid++;
        }else {
            email_error.innerText="E-mail mora biti u formatu: example@live.com";
            email.parentElement.className += ' is-invalid';
        }
    }
    if(countValid==3){
        return true;
    }else {
    }
    return false;
}

var dialog=document.querySelector（'dialog'）；
如果（！dialog.showmodel）{
dialogPolyfill.registerDialog（对话框）；
}
dialog.querySelector（'.close'）.addEventListener（'click'，function（））{
dialog.close（）；
});
函数validateQue（）{
var questions=document.getElementsByClassName（“que”）；
var countValid=0；
对于（var i=0；i

var dialog = document.querySelector('dialog');
if (! dialog.showModal) {
    dialogPolyfill.registerDialog(dialog);
}
dialog.querySelector('.close').addEventListener('click', function() {
    dialog.close();
});
function validateQue() {
var questions=document.getElementsByClassName("que");
var countValid=0;
for(var i=0;i<questions.length;i++){
    var inputs=questions[i].getElementsByTagName("input");
    var id = questions[i].id.replace('que','');
    var lbl = document.getElementById('lbl'+id);
    for(var j=0;j<inputs.length;j++){
        var isAnswered = false;
        if(inputs[j].type=="radio"){
            if(inputs[j].checked)
            {
                isAnswered=true;
                break;
            }
        }
        if(inputs[j].type=="checkbox"){
            if(inputs[j].checked)
            {
                isAnswered=true;
                break;
            }
        }
    }
    var textarea=questions[i].getElementsByClassName("text");
    for(var k=0;k<textarea.length;k++){
        if(textarea[k].value==null ||textarea[k].value=="" || textarea[k].value.trim().length==0)
        {
        }else {
            isAnswered=true;
        }
    }
    if(isAnswered==true){
        countValid++;
        if(lbl!=null) {
            lbl.innerText = "";
        }
    }else{
        if(lbl!=null) {
            lbl.innerText = "*";
        }
    }
}
if(countValid==questions.length){
    dialog.showModal();
}else {
}
}
function validateUser() {
    var ime=document.getElementById("ime");
    var prezime=document.getElementById("prezime");
    var email=document.getElementById("email");
    var ime_error = document.getElementById("ime_error");
    var prezime_error = document.getElementById("prezime_error");
    var email_error = document.getElementById("email_error");
    var countValid=0;
    if(ime.value==null ||ime.value==""|| ime.value.trim().length==0)
    {
        ime.parentElement.className += ' is-invalid';
        ime_error.innerText="Ime je obavezno polje";
    }else {
        ime.parentElement.className.replace(' is-invalid','');
        ime_error.innerText="";
        countValid++;
    }
    if(prezime.value==null ||prezime.value=="" || prezime.value.trim().length==0)
    {
        prezime_error.innerText="Prezime je obavezno polje";
        prezime.parentElement.className += ' is-invalid';
    }else {
        prezime.parentElement.className.replace(' is-invalid','');
        prezime_error.innerText="";
        countValid++;
    }
    if(email.value==null ||email.value==""|| email.value.trim().length==0)
    {
        email.parentElement.className += ' is-invalid';
        email_error.innerText="E-mail je obavezno polje";
    }else {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value))
        {
            email_error.innerText="";
            email.parentElement.className.replace(' is-invalid','');
            countValid++;
        }else {
            email_error.innerText="E-mail mora biti u formatu: example@live.com";
            email.parentElement.className += ' is-invalid';
        }
    }
    if(countValid==3){
        return true;
    }else {
    }
    return false;
}