My main problem here is that this form already had a submit function that redirect to a page. Meanwhile I forgot about validation, then I tried combining both functions into one and it only worked for the name.
So now it requires the name field to be valid and it skips to another html page after pressing the submit button. The local and the e-mail, didn't work at all.
I need help setting the validation configurations, all fields must be validated, the radio buttons (at least one) must be checked, the checkboxes (at least 3) must be checked in order to be valid. I don't want the textbox to demand validation, since it's just an observation field.
If somebody could please help me out, I'd apreciate it very much, Thanks in advance.
body, html {
margin:0;
font:1em "Glegoo", slab-serif;
background-color:#000;
}
h1 {
color:#fff;
text-align:center;
}
h2 {
color:#fff;
}
h3 {
color:#fff;
}
h4 {
color:#fff;
}
legend {
color:#fff;
}
fieldset{
margin-left:150px;
margin-right:150px;
color:#fff;
}
.restodoformulario {
margin-left:164px;
margin-right:150px;
color:#fff;
}
.domo p{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>musicUS</title>
<link rel="stylesheet" href="form-main.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Glegoo">
<link rel="icon" href="backuplogo.png">
<script language="javascript">
function dgi(el)
{
return document.getElementById(el);
}
var aYear = 100;
window.onload = function()
{
var y = dgi('year');
var d = new Date();
var _y = d.getFullYear();
var _o = document.createElement('option');
_o.setAttribute('value', 0);
_o.innerHTML = 'Ano';
y.appendChild(_o);
for(var i = 0; i < aYear; i++)
{
var o = document.createElement('option');
o.setAttribute('value', _y);
o.innerHTML = _y;
y.appendChild(o);
_y--;
}
}
function loadMonths(obj)
{
if(obj.value != '0')
{
dgi('months').style.display = '';
}
else
{
dgi('months').style.display = 'none';
}
}
function loadDays(obj)
{
var days = dgi('days');
if(obj.value != '0')
{
clearDays();
var number = 32 - new Date(parseInt(dgi('year').value), parseInt(dgi('months').value)-1, 32).getDate();
for(var i = 1; i <= number; i++)
{
var o = document.createElement('option');
o.setAttribute('value', i);
o.innerHTML = i;
days.appendChild(o);
}
days.style.display = '';
}
else
{
clearDays();
hideDays();
}
}
function clearDays()
{
var days = dgi('days');
days.innerHTML = '';
}
function hideDays()
{
var days = dgi('days');
days.style.display = 'none';
}
</script>
<script type="text/javascript">
function outrofestival(val){
var element=document.getElementById('festival');
if(val=='Escolhe um festival'||val=='outro')
element.style.display='block';
else
element.style.display='none';
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js">
</script>
<script>
jQuery(function(){
var max = 3;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
</script>
<script>
function redirect() {
window.location.replace("obrigado.html");
return false;
if(document.getElementById('nome').value=="") {
alert ('Por favor preenche o teu nome.');
return false;
} else if(document.getElementById('local').value=="") {
alert ('Por favor preenche a tua localidade.');
return false;
} else if(document.getElementById('email').value=="") {
alert ('Por favor preenche o teu e-mail.');
return false;
}
}
</script>
</head>
<body>
<h1>
<p>Diz-nos a que festival é que vais este verão!</p>
</h1>
<form method="post" id="formfest" action="#" onSubmit="return redirect()" >
<fieldset>
<legend><b>Sobre ti</b></legend>
Nome Completo:
<input type="text" size="30" maxlength="60" name="nome" required>
<br>
Sexo:
<br>
<input type="radio" name="sexo" value="feminino">Feminino
<br>
<input type="radio" name="sexo" value="masculino">Masculino
<br>
<input type="radio" name="sexo" value="naodefinido">Não definido
<br>
Data de Nascimento:
<select id="year" onchange="loadMonths(this);"></select>
<select id="months" style="display: none;" onchange="loadDays(this);">
<option value="0">Mês</option>
<option value="1">Janeiro</option>
<option value="2">Fevereiro</option>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option>
<option value="9">Setembro</option>
<option value="10">Outubro</option>
<option value="11">Novembro</option>
<option value="12">Dezembro</option>
</select>
<select id="days" style="display: none;"></select>
<br>
Localidade:
<input type="text" size="36" maxlength="60" name="local">
<br>
E-mail:
<input type="text" size="41" maxlength="40" name="email">
<p></p>
</fieldset>
<div class="restodoformulario">
<p><b>Sobre os festivais</b></p>
<p>Qual o festival que desperta mais o teu interesse para ires este verão?</p>
<select name="festival" onchange='outrofestival(this.value);'>
<option>Escolhe um festival</option>
<option value="alive">NOS Alive</option>
<option value="sbsr">Super Bock Super Rock</option>
<option value="pdc">Vodafone Paredes de Coura</option>
<option value="msw">MEO Sudoeste</option>
<option value="edp">EDP CoolJazz</option>
<option value="nps">NOS Primavera Sound</option>
<option value="outro">Outro</option>
</select>
<p><input type="text" name="festival" id="festival" size="32" maxlength="60" style='display:none;'/></p>
<p>Selecciona dos tópicos abaixo, os 3 aspectos mais apelativos de um festival</p>
<input type="checkbox" name="aspectos" value="cartaz">Cartaz
<br>
<input type="checkbox" name="aspectos" value="campismo">Campismo
<br>
<input type="checkbox" name="aspectos" value="preço">Preço
<br>
<input type="checkbox" name="aspectos" value="acessos">Facilidades de acesso
<br>
<input type="checkbox" name="aspectos" value="ambiente">Ambiente
<br>
<input type="checkbox" name="aspectos" value="idade">Faixa etária do público
<br>
<input type="checkbox" name="aspectos" value="localização">Localização
<br>
<input type="checkbox" name="aspectos" value="segurança">Segurança
<br>
<input type="checkbox" name="aspectos" value="dimensão">Dimensão do festival
<br>
<input type="checkbox" name="aspectos" value="variedade">Variedade de conteúdos musicais
<br>
<input type="checkbox" name="aspectos" value="actividades">Actividades no festival
<br>
<p>Com quantas pessoas vais ao festival que escolheste?</p>
<select size="3" style="height:100px;">
<option>Vou sozinho.</option>
<option>Com um amigo.</option>
<option>Com 2 amigos.</option>
<option>Com 3 amigos.</option>
<option>Com 4 amigos.</option>
<option>Com 5 amigos.</option>
<option>Com 6 amigos.</option>
<option>Com 7 amigos.</option>
<option>Com 8 amigos.</option>
<option>Vou trazer o acampamento.</option>
</select>
<br>
<p>Porque recomendarias o festival que escolheste?</p>
<textarea rows="8" cols="50" name="observacoes" style="text-indent: 3px">
</textarea>
<br>
<a href="home.html"><input type="submit" name="enviar" value="Tá feito." ></a>
<input type="reset" value="Limpar respostas.">
<br><br><br>
</div>
</form>
</body>
</html>Remove onSubmit="" from <form> and then intercept the submit with jQuery:
$("#myform").on("submit", function() {
validate();
if(is_good) {
redirect();
}
return false;
});
You can then run as many functions as you need.
Here is a simple demo: https://jsfiddle.net/johnniebenson/c2n4gwjj/