I'm trying to set a mobile view for my site.
In this particular case i have to show two different forms according to the width of the page (under 400px it shows the "login-form-mobile").
The form submit is handled by a js function, the problem is that the function works only on the first form (over 400px), the second one submit without checking if inputs are empty etc...
Does someone knows why?
function validaReg() {
if (document.formregistrazione.nome.value === "") {
togglediv("invalidname");
invalidForm("nome");
return false;
}
if (document.formregistrazione.email.value === "") {
togglediv("invalidemail");
invalidForm("email");
return false;
}
if (document.formregistrazione.username.value === "") {
togglediv("invalidusername");
invalidForm("username");
return false;
}
if (document.formregistrazione.password.value === "") {
togglediv("invalidpassword");
invalidForm("password");
return false;
}
if (document.formregistrazione.ripeti_password.value === "") {
togglediv("invalidrippassword");
invalidForm("ripeti_password");
return false;
}
var pw1 = document.getElementById("password");
var pw2 = document.getElementById("ripeti_password");
var id = document.getElementById("invalidrippassword");
if (pw2.value != pw1.value) {
pw2.classList.add("is-invalid");
id.style.display = 'block';
return false;
}
return true;
}
<div id="login-form" class="container-form fade-in-image">
<div class="fade-in-image col-md-12 mb-3">
<img id="logo" class="img-fluid" src="Fubles.png">
<img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
</div>
<form class="ctr-form" style="width:50%;" method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
<div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
<div id="invalidname" class="invalid-feedback" style="display: none;">
Inserire un nome
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cognome">Email</label>
<input type="email" class="form-control" id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
<div id="invalidemail" class="invalid-feedback" style="display: none;">
Inserire una email
</div>
</div>
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">#</span>
</div>
<input type="text" class="form-control" id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
<div id="invalidusername" class="invalid-feedback" style="display: none;">
Scegli un username
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="stato">Password</label>
<input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
<div id="invalidpassword" class="invalid-feedback" style="display: none;">
Scegli una password
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cap">Ripeti password</label>
<input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
<div id="invalidrippassword" class="invalid-feedback" style="display: none;">
La password deve corrispondere!
</div>
</div>
<div class="col-md-2 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
<label class="custom-control-label" for="male">Uomo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="female" name="sex" value="F" class="custom-control-input">
<label class="custom-control-label" for="female">Donna</label>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
</div>
</div>
</div>
</form>
</div>
<div style="overflow-y: scroll; margin-top: 5%;" id="login-form-mobile" class="container-form fade-in-image">
<div class="fade-in-image col-md-12 mb-3">
<img id="logo" class="img-fluid" src="Fubles.png">
<img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
</div>
<form method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
<div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="nome">Nome</label>
<input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
<div id="invalidname" class="invalid-feedback" style="display: none;">
Inserire un nome
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cognome">Email</label>
<input type="email" class="form-control" id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
<div id="invalidemail" class="invalid-feedback" style="display: none;">
Inserire una email
</div>
</div>
<div class="col-md-3 mb-3">
<label for="username">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroupPrepend3">#</span>
</div>
<input type="text" class="form-control" id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
<div id="invalidusername" class="invalid-feedback" style="display: none;">
Scegli un username
</div>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<label for="stato">Password</label>
<input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
<div id="invalidpassword" class="invalid-feedback" style="display: none;">
Scegli una password
</div>
</div>
<div class="col-md-3 mb-3">
<label for="cap">Ripeti password</label>
<input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
<div id="invalidrippassword" class="invalid-feedback" style="display: none;">
La password deve corrispondere!
</div>
</div>
<div class="col-md-2 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
<label class="custom-control-label" for="male">Uomo</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="female" name="sex" value="F" class="custom-control-input">
<label class="custom-control-label" for="female">Donna</label>
</div>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-md-3 mb-3">
<button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
</div>
</div>
</div>
</form>
</div>
Your form is not working because you have a bug in the lines that start with document.formregistrazione. You are trying to read a value from undefined. Instead you can access your field value like this document.formregistrazione["0"]["0"].value.
Note: if you are trying to test the second form replace document.formregistrazione["0"]["0"].value by document.formregistrazione["1"]["0"].value! (Replace the first "0" by "1")
function validaReg() {
console.log(document.formregistrazione);
if (document.formregistrazione["0"]["0"].value === "") {
togglediv("invalidname");
invalidForm("nome");
return false;
}
if (document.formregistrazione["0"]["1"].value === "") {
togglediv("invalidemail");
invalidForm("email");
return false;
}
if (document.formregistrazione["0"]["2"].value === "") {
togglediv("invalidusername");
invalidForm("username");
return false;
}
if (document.formregistrazione["0"]["3"].value === "") {
togglediv("invalidpassword");
invalidForm("password");
return false;
}
if (document.formregistrazione["0"]["4"].value === "") {
togglediv("invalidrippassword");
invalidForm("ripeti_password");
return false;
}
var pw1 = document.getElementById("password");
var pw2 = document.getElementById("ripeti_password");
var id = document.getElementById("invalidrippassword");
if (pw2.value != pw1.value) {
pw2.classList.add("is-invalid");
id.style.display = 'block';
return false;
}
return true;
}
I have a fairly straightforward validation function that only checks if input is empty or not. I'm using it across a half dozen different forms and it seems to be working everywhere except one specific input id="driver_first_name" . Can't figure out why it fails there.
If I leave all fields empty I get errors on all of them, and is generally correct across any combination I have tried except driver_first_name In the case that I fill out everything except driver_first_name the form submits anyways.
Any insight on what might be going on here?
Thank you!
My Validation function is this:
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result=false;
$.each( fields.rules, function( key, value ) {
if(!$("#"+key+"").val()){
$("#"+key+"").addClass("form-error");
$( "<div class='form-input-error'>"+value.message+"</div>" ).insertBefore("#"+key+"");
result = false;
//console.log(this.val());
}
else{
$("#"+key+"").removeClass("form-error");
result = true;
}
});
return result;
}
I am calling my validation on my submit triggers, generally like this for fields that should not be empty:
$(".app-canvas").on('click', ".submitNewDriver", function () {//list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if(validateForm($("#addDriverForm"),checkInputs) == true){
console.log("form submit");
addNewDriver();
}
else{
console.log("form errors");
}
});
My full form HTML is
<div class="form-wrapper">
<form id="addDriverForm" class="post-form" action="modules/add_driver.php" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<div class="submitNewUnit button green"><i class="material-icons">save</i>Submit</div>
</form>
</div>
Your validation logic is a little messed up. This is what's happening:
#driver_first_name is validated as invalid... result is set false
#driver_last_name is validated as valid... result is set true
#driver_address_street is validated as valid... result is set true
After all that the code thinks the form is valid. You're only preventing the form from being submitted if the last field as validated as not-valid.
Change your logic to assume the form is valid from the beginning. Then set it to false if any of the fields are invalid.
I also don't see anything in your code that actually prevents the form submition, so I also added e.preventDefault()
function validateForm(form, fields) { //add exit anbimation and reset the container state
$(".form-input-error").remove();
var result = true;
$.each(fields.rules, function(key, value) {
if (!$("#" + key + "").val()) {
$("#" + key + "").addClass("form-error");
$("<div class='form-input-error'>" + value.message + "</div>").insertBefore("#" + key + "");
result = false;
//console.log(this.val());
} else {
$("#" + key + "").removeClass("form-error");
}
});
return result;
}
$(".app-canvas").on('click', ".submitNewDriver", function(e) { //list all drivers trigger
var checkInputs = {
rules: {
driver_first_name: {
message: "First Name is Required"
},
driver_last_name: {
message: "Last Name is Required"
},
driver_address_street: {
message: "street is Required"
}
}
};
if (validateForm($("#addDriverForm"), checkInputs) == true) {
console.log("form submit");
} else {
e.preventDefault();
console.log("form errors");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="app-canvas form-wrapper">
<form id="addDriverForm" class="post-form" action="" method="post">
<div class="form-row">
<label for="driver_first_name">First Name:</label>
<input id="driver_first_name" placeholder="John" type="text" name="driver_first_name">
</div>
<div class="form-row">
<label for="driver_last_name">Last Name:</label>
<input id="driver_last_name" placeholder="Smith" type="text" name="driver_last_name">
</div>
<div class="form-row">
<label for="driver_address_street">Street</label>
<input id="driver_address_street" placeholder="123 Main St." type="text" name="driver_address_street">
</div>
<div class="form-row">
<label for="driver_address_city">City</label>
<input id="driver_address_city" placeholder="Chicago" type="text" name="driver_address_city">
</div>
<div class="form-row">
<label for="driver_address_state">State</label>
<input id="driver_address_state" placeholder="IL" type="text" name="driver_address_state">
</div>
<div class="form-row">
<label for="driver_address_zip">Zip</label>
<input id="driver_address_zip" placeholder="60164" type="number" name="driver_address_zip">
</div>
<div class="form-row">
<label for="driver_telephone">Zip</label>
<input id="driver_telephone" placeholder="60164" type="tel" name="driver_telephone">
</div>
<div class="form-row">
<label for="driver_email">E-Mail</label>
<input id="driver_email" placeholder="60164" type="email" name="driver_email">
</div>
<div class="form-row"><label for="driver_payment_type">Settlement Type</label>
<select id="driver_payment_type" name="driver_payment_type">
<option value="flat">Flat Rate</option>
<option value="percent">Percent</option>
<option value="mile">Per Mile</option>
</select></div>
<div class="form-row">
<label for="driver_license_number">Lisence #</label>
<input id="driver_license_number" placeholder="ex:D400-7836-2633" type="number" name="driver_license_number">
</div>
<div class="form-row">
<label for="driver_license_expiration">Lisence Expiration Date</label>
<input id="driver_license_expiration" type="date" name="driver_license_expiration">
</div>
<div class="form-row">
<label for="driver_licence_image">Lisence Copy</label>
<input id="driver_licence_image" type="file" name="driver_licence_image">
</div>
<div class="form-row">
<label for="driver_medical_certificate_expiration">Medical Certificate Expiration</label>
<input id="driver_medical_certificate_expiration" type="date" name="driver_medical_certificate_expiration">
</div>
<div class="form-row">
<label for="driver_medical_certificate_image">Medical CXertificate Copy</label>
<input id="driver_medical_certificate_image" type="file" name="driver_medical_certificate_image">
</div>
<div class="form-row">
<label class="driverCheckbox" for="driver_access_mobile_app">Allow Mobile Access</label>
<input id="driver_access_mobile_app" checked value="1" type="checkbox" name="driver_access_mobile_app">
</div>
<div class="form-row"></div>
<div class="driver-access-copnditional">
<div class="form-row">
<label for="driver_username">Username</label>
<input id="driver_username" placeholder="JohSmi" type="text" name="driver_username">
</div>
<div class="form-row">
<label for="driver_password">Password</label>
<input id="driver_password" placeholder="***" type="password" name="driver_password">
</div>
</div>
<div class="clear"></div>
<input type="submit" class="submitNewDriver button green" value="Submit" />
</form>
</div>
I have a Create resume page with four different parts on the same page, every section has its own database table. I want when it is submitted for it to redirect on another id which I've given in the submit button.
<div class="panel-body">
<ul class="nav nav-tabs nav-justified m-12" role="tablist">
<li id="li1" class="active border-right">Contact Information</li>
<li id="li2">Basic Information</li>
<li id="li3">Education Details</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="cinfo">
<form method="POST" enctype="multipart/form-data">
<div class="form-group col-md-6 p-r">
<label>Professional Title</label>
<input type="text" name="title" class="form-control" required="required" />
</div>
<div class="form-group col-md-6 p-l">
<label>First Name</label>
<input type="text" name="fname" class="form-control" required="required" />
</div>
<div class="form-group col-md-6 p-r">
<label>Last name</label>
<input type="text" name="lname" class="form-control" required="required" />
</div>
<div class="form-group col-md-6 p-l">
<label>Email</label>
<input type="email" name="mail" class="form-control" required="required" />
</div>
<div class="form-group col-md-6 p-r">
<label>Phone Number</label>
<input type="text" name="phone" class="form-control" required="required" />
</div>
<!-- <div class="col-md-4 p-l"> -->
<button id="btn1" type="submit" name="cinfo_btn" class="btn btn-default btn-block">Next</button>
<!-- </div> -->
</form>
</div>
<!-- Basic Information -->
<div class="tab-pane fade" id="binfo">
<form method="POST" enctype="multipart/form-data">
<div class="form-group col-md-6 p-l">
<label>Job Title</label>
<input type="text" name="jobtitle" class="form-control" />
</div>
<div class="form-group col-md-6 p-r">
<label>Position</label>
<input type="text" name="position" class="form-control" />
</div>
<div class="form-group col-md-6 p-l">
<label>Years of Experience</label>
<input type="text" name="exp" class="form-control" />
</div>
<button id="btn2" type="submit" name="einfo_btn" class="btn btn-default btn-block">Next</button>
<!-- </div> -->
</form>
</div>
</div>
The best approach for you would be to use ajax.
Submit the first form using ajax then in response success callback
just trigger click event on on the next tab then it will take to you tab you have specified.
this take the tab to 2nd tab.
request1 = $.ajax({
url: "url",
type: "POST",
data: yourdata
});
request1.done(function (response, textStatus, jqXHR) {
$('#li2').trigger('click')
});
this take the tab to 3rd tab.
request2= $.ajax({
url: "url",
type: "POST",
data: yourdata
});
request2.done(function (response, textStatus, jqXHR) {
$('#li3').trigger('click')
});
I'm trying to post a pseudo with ajax like in the title , i think actually with my code i send no informations to my php file.
so this is the code :
$('#send').click(function(){
var pseudo = $('#psd').val();
});
function recuppoint() {
$.post('point.php',{pseudo: pseudo} ,function(data) {
console.log('['+data + ']');
$('.infos2').html(data);
});
}
setInterval(recuppoint, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
So guys how can i solve the problem with the var pseudo ?
thank you
Your div element with id "psd", doesnt have value. If you want to send html use .html(); If you want to get only input values so try some like this:
var x = $('input[name=nameOfInput]').val();
Then you should send it with ajax.
your ajax call should be like this .
you can not access the input field with its parent id as you did $('#psd').val();
but you can access it value with its id itself like this
<input class="field-input" type="text" name="pseudo" id="pseudo" />
$('#send').on('click', function(){
var pseudo = $('#pseudo').val();
$.ajax({
url:'point.php',
type:'POST',
data:{ ele: pseudo},
success:function(data){
$('.infos2').html(data);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="logForm" action="">
<div class="field">
<label class="field-label" for="mailconnect">Votre mail</label>
<input class="field-input"type="email" name="mailconnect" id="email" />
</div>
<div class="field" id="psd">
<label class="field-label" for="client">pseudo client</label>
<input class="field-input" type="text" name="pseudo" id="pseudo" />
</div>
<div class="field">
<label class="field-label" for="mdpconnect">mdp</label>
<input class="field-input" type="password" name="mdpconnect" id="password" />
</div>
<button id="send" class="send"name="formsubscribe">begin</button>
</form>
<div>
<div id="infos" class="infos" align="center"> </div>
<div id="infos2" class="infos2" align="center"> </div>
</div>
I get objects of the type of:
{
personalData: {
name: "Diego",
last: "Aguilar",
mail: "diego#domain.com"
},
professionalData: {
almaMater: "BUAP",
courses: [
{},
{
name: "JavaScript Newbies",
tags: ["","",""]
}
]
}
}
So in that example, empty objects at professionalData.courses should be dropped and so the tags key at second object as their array elements are whole empty ones.
In general words, any time I find values being an empty object or array element, drop them. Also, if a key would get empty arrays or objects, drop them too.
Maybe jQuery or lodash/underscore would give a direct solution to this?
This is an example of an object stored at MongoDB:
{
"_id" : ObjectId("537e09c9896e05225cf50cb8"),
"datosPersonales" : {
"name" : "Maricela",
"lastname" : "Aguilar Flores",
"age" : "22",
"phone" : "2878710097",
"mobile" : "2878812505",
"email" : "af05_#hotmail.com",
"address" : "Carranza 168 Int 2"
},
"datosProfesionales" : {
"postgraduates" : [
{
"degree" : "Especialidad",
"title" : "Amor",
"cedula" : "ASFAS5"
},
{
"degree" : "Maestría",
"title" : "Romance",
"cedula" : "v"
}
],
"works" : [
"Universidad Hispano"
],
"freelances" : [ ],
"noPsychoWorks" : [ ],
"almaMater" : "BUAP",
"course" : "1987",
"cedula" : "SAFS555FSA",
"workAreas" : [
"Clínica",
"Laboral"
],
"freelance" : "true",
"noPsychoWork" : "false"
},
"interesesProfesionales" : {
"groups" : [
"Asociación de Psicólogos de Tuxtepec",
"Club de Toby"
],
"trainingTopics" : [
"Real Madrid",
"Cocina"
],
"belongsToSomewhere" : "true",
"activities" : [
"Conferencias y encuentros",
"Talleres"
],
"trainingAreas" : [
"Educativa"
],
"hasParticipated" : "true",
"wantsToBelong" : "true",
"whyToBelong" : "Futuro"
}
}
EDIT
This ugly objects are result of a bad handling in my Angular module.
That object came as a result of this code at Angular controller:
(function() {
var app = angular.module('PsicologosRegister', ['checklist-model'])
app.controller('PsicologoController', function($scope) {
this.psycho = psicologo
this.print = function() {
console.log(this.psycho)
}
this.toMongo = function() {
$.ajax({
type:"POST",
url:"/psychos",
data:this.psycho
})
}
})
app.controller('PersonalDataController', function() {
this.data = datos_Personales
})
app.controller('ProfessionalDataController', function() {
this.data = datos_Profesionales
})
app.controller('ProfessionalInterestsController', function() {
this.data = intereses_Profesionales
this.print = function() {
console.log(this.psycho)
}
})
app.controller('PosgraduateController', function() {
this.degrees = [
'Especialidad',
'Maestría',
'Doctorado'
]
this.postgraduates = _postgraduates
this.addPostgraduate = function() {
this.postgraduates.push({})
}
})
app.controller('WorkController', function() {
this.works = _works
this.addWork = function() {
this.works.push("")
}
})
app.controller('FreelanceController', function() {
this.freelances = _freelances
this.addFreelance = function() {
this.freelances.push("")
}
this.noFreelance = function() {
this.freelances = [""]
}
})
app.controller('NoPsychoWorkController', function() {
this.noPsychoWorks = _noPsychoWorks
this.addNoPsychoWork = function() {
this.noPsychoWorks.push("")
}
this.notNoPsychoWorks = function() {
this.noPsychoWorks = [""]
}
})
app.controller('TrainingTopicsController', function() {
this.trainingTopics = _trainingTopics
this.add = function() {
this.trainingTopics.push("")
}
})
app.controller('GroupsController', function() {
this.groups = _groups
this.add = function() {
this.groups.push("")
}
this.doesntBelongToAnywhere = function() {
this.groups = [""]
}
})
var _noPsychoWorks = [""]
var _freelances = [""]
var _works = [""]
var _postgraduates = [{}]
var _trainingTopics = [""]
var _groups = [""]
var _events = [{}]
var datos_Personales = {}
var datos_Profesionales = {postgraduates:_postgraduates, works: _works, freelances:_freelances, noPsychoWorks:_noPsychoWorks}
var intereses_Profesionales = {events:_events,groups:_groups,trainingTopics:_trainingTopics}
var psicologo = {
datosPersonales: datos_Personales,
datosProfesionales: datos_Profesionales,
interesesProfesionales: intereses_Profesionales
}
})()
This data is generated with the inputs from a web form, rendered with Angular. For elements at arrays I use ng-repeat. The problem is that as it's unknown whether there will be any freelances, postgraduates, etc. I start their belonging keys with Strings, for example.
This is my whole long markup:
<div id="formulario">
<div class="container" id="seccionRegistro1" ng-controller="PersonalDataController as personal">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputNombre" class="col-xs-2 control-label">Nombre(s)</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Nombre(s)" ng-model="personal.data.name" >
</div>
</div>
<div class="form-group">
<label for="inputApellidos" class="col-xs-2 control-label">Apellidos</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Apellidos" ng-model="personal.data.lastname">
</div>
</div>
<div class="form-group">
<label for="inputEdad" class="col-xs-2 control-label">Edad</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Edad" ng-model="personal.data.age">
</div>
</div>
<div class="form-group">
<label for="inputTel" class="col-xs-2 control-label">Teléfono</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Teléfono" ng-model="personal.data.phone">
</div>
</div>
<div class="form-group">
<label for="inputCel" class="col-xs-2 control-label">Celular</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Celular" ng-model="personal.data.mobile">
</div>
</div>
<div class="form-group">
<label for="inputMail" class="col-xs-2 control-label">e-mail</label>
<div class="col-xs-10">
<input type="email" class="form-control" placeholder="e-mail" ng-model="personal.data.email">
</div>
</div>
<div class="form-group">
<label for="inputFB" class="col-xs-2 control-label">Facebook</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Facebook" ng-model="personal.data.fb">
</div>
</div>
<div class="form-group">
<label for="inputDireccion" class="col-xs-2 control-label">Dirección</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Dirección" ng-model="personal.data.address">
</div>
</div>
<div class="col-xs-offset-2 col-xs-10">
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion1" value="Continuar"/>
</div>
</form>
</div>
<div class="container" id="seccionRegistro2" ng-controller="ProfessionalDataController as professional">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputAlmaMater" class="col-xs-2 control-label">Egresado de</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Egresado de" ng-model="professional.data.almaMater">
</div>
</div>
<div class="form-group">
<label for="inputAñoEgreso" class="col-xs-2 control-label">Año de egreso</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Año de egreso" ng-model="professional.data.course">
</div>
</div>
<div class="form-group">
<label for="inputCedula" class="col-xs-2 control-label">Cédula Profesional</label>
<div class="col-xs-10">
<input type="text" class="form-control" placeholder="Cédula Profesional" ng-model="professional.data.cedula">
</div>
</div>
<div class="form-group" ng-controller="PosgraduateController as postgraduate">
<label for="checkPosgrado" class="col-xs-2 control-label">Estudios de Posgrado</label>
<div ng-repeat="p in postgraduate.postgraduates track by $index">
<div class="padding-between-lines">
<label for="checkPosgrado" class="col-xs-2 control-label" ng-show="$index!=0"></label>
<div class="col-xs-2">
<select ng-options="t for t in postgraduate.degrees" ng-model="p.degree" class="form-control"><select>
</div>
<div class="col-xs-4">
<input type="text" ng-model="p.title" class="form-control inputPosgradoTitulo" placeholder="Título">
</div>
<div class="col-xs-3">
<input type="text" ng-model="p.cedula" class="form-control inputPosgradoCedula" placeholder="Cédula">
</div>
<div class="col-xs-1">
<input type="button" class="form-control" value="Añadir" ng-click="postgraduate.addPostgraduate()" ng-show="$index==0">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="areaTrabajo" class="col-xs-2 control-label">Areas de la psicología en las que se desempeña</label>
<div class="col-xs-10" >
<label class="checkbox-inline" ng-repeat="area in ['Clínica', 'Social', 'Laboral', 'Educativa']">
<input type="checkbox" checklist-model="professional.data.workAreas" checklist-value="area"> {{area}}
</label>
</div>
</div>
<div class="form-group" ng-controller="WorkController as work">
<label for="inputTrabajo" class="col-xs-2 control-label">Institución de trabajo</label>
<div ng-repeat="w in work.works track by $index">
<div class="padding-between-lines">
<label for="inputTrabajo" class="col-xs-2 control-label" ng-show="$index!=0"></label>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Institución de trabajo" ng-model="work.works[$index]">
</div>
<div class="col-xs-1">
<input type="button" class="form-control" value="Añadir" ng-click="work.addWork()" ng-show="$index==0">
</div>
</div>
</div>
</div>
<div class="form-group" ng-controller="FreelanceController as freelance">
<label for="trabajoIndependiente" class="col-xs-2 control-label">Desarrollo Profesional Independiente</label>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" ng-model="professional.data.freelance" name="optionsTrabajoIndependiente" value="true">
Sí
</label>
</div>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" ng-model="professional.data.freelance" ng-change="freelance.noFreelance()" name="optionsTrabajoIndependiente" value="false">
No
</label>
</div>
</div>
<div ng-repeat="f in freelance.freelances track by $index">
<div class="padding-between-lines">
<label class="col-xs-4" ng-hide="$index==0"></label>
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="Desarrollo profesional independiente" ng-model="freelance.freelances[$index]" ng-disabled="professional.data.freelance=='false'">
</div>
<div class="col-xs-1">
<input type="button" class="form-control añadirTrabajoIndependiente" value="Añadir" ng-show="$index==0" ng-click="freelance.addFreelance()" ng-disabled="professional.data.freelance=='false'">
</div>
</div>
</div>
</div>
<div class="form-group" ng-controller="NoPsychoWorkController as noPsycho">
<label class="col-xs-2 control-label">Actividades de trabajo no relacionadas con la psicología</label>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" ng-model="professional.data.noPsychoWork" name="optionsTrabajoNoPsicologia" value="true">
Sí
</label>
</div>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" ng-model="professional.data.noPsychoWork" name="optionsTrabajoNoPsicologia" value="false" ng-change="noPsycho.notNoPsychoWorks()">
No
</label>
</div>
</div>
<div ng-repeat="n in noPsycho.noPsychoWorks track by $index">
<div class="padding-between-lines">
<label class="col-xs-4" ng-hide="$index==0"></label>
<div class="col-xs-7">
<input type="text" class="form-control" placeholder="Actividad" ng-model="noPsycho.noPsychoWorks[$index]" ng-disabled="professional.data.noPsychoWork=='false'">
</div>
<div class="col-xs-1">
<input type="button" class="añadirTrabajoNoPsicologia form-control" value="Añadir" ng-show="$index==0" ng-click="noPsycho.addNoPsychoWork()" ng-disabled="professional.data.noPsychoWork=='false'">
</div>
</div>
</div>
</div>
<div class="col-xs-offset-2 col-xs-10" ng-controller="PsicologoController as psi">
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion2" value="Continuar" ng-click="psi.print()"/>
</div>
</form>
</div>
<div class="container" id="seccionRegistro3" ng-controller="ProfessionalInterestsController as interests">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="actividadesInteres" class="col-xs-2 control-label">Actvidades profesionales en las que le gustaría participar</label>
<div class="col-xs-10" >
<label class="checkbox-inline" ng-repeat="area in ['Conferencias y encuentros', 'Cursos', 'Talleres', 'Diplomados', 'Maestría', 'Doctorado']">
<input type="checkbox" class="areaTrabajo" checklist-model="interests.data.activities" checklist-value="area"> {{area}}
</label>
</div>
</div>
<div class="form-group">
<label for="capacitacionInteres" class="col-xs-2 control-label">Areas de la psicología en las que le gustaría capacitarse</label>
<div class="col-xs-10">
<label class="checkbox-inline" ng-repeat="area in ['Clínica', 'Social', 'Laboral', 'Educativa']">
<input type="checkbox" class="areaTrabajo" checklist-model="interests.data.trainingAreas" checklist-value="area"> {{area}}
</label>
</div>
</div>
<div class="form-group" ng-controller="TrainingTopicsController as trainingTopic">
<label for="inputNombre" class="col-xs-2 control-label">¿Alguna temática en particular que le gustaría conocer o capacitarse?</label>
<div ng-repeat="tp in trainingTopic.trainingTopics track by $index">
<div class="padding-between-lines">
<label class="col-xs-2 control-label" ng-hide="$index==0"></label>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Temática de interés" ng-model="trainingTopic.trainingTopics[$index]">
</div>
<div class="col-xs-1">
<input type="button" class="añadirTemaInteres form-control" value="Añadir" ng-show="$index==0" ng-click="trainingTopic.add()">
</div>
</div>
</div>
</div>
<div class="form-group" ng-controller="GroupsController as group">
<label for="checkPosgrado" class="col-xs-2 control-label">¿Pertenece a alguna agrupación relacionada con el campo de la psicología?</label>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsPertenenciaAgrupacion" value="true" ng-model="interests.data.belongsToSomewhere">
Sí
</label>
</div>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsPertenenciaAgrupacion" value="false" ng-model="interests.data.belongsToSomewhere" ng-change="group.doesntBelongToAnywhere()">
No
</label>
</div>
</div>
<div ng-repeat="g in group.groups track by $index">
<div class="padding-between-lines">
<label class="col-xs-2 control-label" ng-hide="$index==0"></label>
<div class="col-xs-7">
<input type="text" class="inputAgrupacion form-control" placeholder="Agrupación" ng-model="group.groups[$index]" ng-disabled="interests.data.belongsToSomewhere=='false'">
</div>
<div class="col-xs-1">
<input type="button" class="form-control" value="Añadir" ng-show="$index==0" ng-click="group.add()" ng-disabled="interests.data.belongsToSomewhere=='false'">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="participacionEventos" class="col-xs-2 control-label">¿Ha participado con anterioridad en algún evento de la Asociación de Psicólogos de Tuxtepec?</label>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsParticipacionEventos" value="true" ng-model="interests.data.hasParticipated">
Sí
</label>
</div>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsParticipacionEventos" value="false" ng-model="interests.data.hasParticipated">
No
</label>
</div>
</div>
<div class="col-xs-8">
<select multiple class="form-control">
<option value="abrazoterapia">Abrazoterapia</option>
<option value="tallerMujeres">Taller autoestima mujeres</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<h4>Le gustaría participar como miembro activo de la Asociación de Psicólogos de Tuxtepec A.C</h4>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsMiembro" value="true" ng-model="interests.data.wantsToBelong">
Sí
</label>
</div>
</div>
<div class="col-xs-1">
<div class="radio">
<label>
<input type="radio" name="optionsMiembro" value="false" ng-model="interests.data.wantsToBelong">
No
</label>
</div>
</div>
<div class="col-xs-4">
<textarea class="form-control" rows="3" placeholder="¿Por qué?" ng-model="interests.data.whyToBelong"></textarea>
</div>
</div>
<div class="col-xs-offset-2 col-xs-10" ng-controller="PsicologoController as psi">
<input type="button" class="btn btn-primary btnSeccion" id="btnSeccion3" value="Finalizar" ng-click="psi.toMongo()"/>
</div>
</form>
</div>
</div>
Why not just keep it simple and create a solution that works for the given object. You can always refactor it and then come up with a more elegant solution after that. But you'll need to establish a working point just to get you started. I'd also suggestion caution to creating a complex solution too - because after all, schemas can change ( no matter how many times you may be told they won't ).
I'd start out by just creating separate methods to evaluate each piece individually. For instance, create a solution to work with each of your parent keys ( datosPersonales, datosProfesionales, interesesProfesionales ) that will just determine if they are empty first.
Next, create a solution to work with each sibling of those parents ( postgraduates would have its own routine to check for empty values, works would have its own, etc. ).
Follow this for each branch in the object.
Once you get something that can evaluate each one of them, you'll then be able to start refactoring by working your way up from the bottom-most level ( for instance, tags would be the bottom most level in your first object example ).
Start combining like methods that seem to do the same job and create a universal method that works for each like structure.
And so on..
Once you get a solution close to what you want, I think that's when you'll either be ready to say "hey, can someone help me refactor this even more?".
A good utility kit to help you on your way is underscore: http://underscorejs.org/#map
hope that helps.