如何validation数据库生成的问卷
我有从数据库生成的node.js问卷，现在的问题可以是任何“多选，单选，是 – 否和文本”的随机typesvalidation应该是简单的检查是每个问题的答案。 我知道如何validation表单，但问题是，我的表单有名称，姓氏和电子邮件对话框，所以我需要第一部分在jQuery /buttonid="show-dialog" JavaScriptvalidation，以及我的对话名称，姓氏和第二个button上的电子邮件。
我的看法（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>
Node.js路由start.js：
var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/:id', function(req, res, next) { var pg = require('pg'); var connect = "postgres://postgres:postgres11@localhost:5432/Questionnaire" var client = new pg.Client(connect); // connect to our database var odgovori; client.connect(); client.query('SELECT * FROM predefinisani_odgovori WHERE(Select id FROM pitanja Where upitnik_id=$1 AND id=pitanje_id) = pitanje_id order by random() limit 1000;',[req.params.id], function (err, result) { if (err) throw err; if(result!=null) odgovori = result.rows; }); client.query('SELECT * FROM pitanja WHERE upitnik_id=$1',[req.params.id], function (err, result) { if (err) throw err; var all = result.rows; res.render('start',{pitanja: all,title:'Questionnaire',odgovori:odgovori}) // execute a query on our database client.end(function (err) { if (err) throw err; }); }); }); module.exports = router;
JavaScript中的解决scheme是这里：
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; }