I have a form which holds two ng-forms where i am validating the input. I have two questions regarding my forms.
1) In the input Company I want to validate for the minlength, but my approach seems not to work. How can i solve this problem?
2) I want to use Angularjs validation with my error messages but the browser automatically shows "This input is invalid" AND Internet Explorer does not validate at all. Where is my fault? I already tried nonvalidate and ng-required but then my form does submit without validation.
Here is the plunkr link : Plunkr
Thanks in advance,
YB
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.billingAdrEqualsShippingAdr = false;
$scope.confirmBillingEqualsShipping = true;
$scope.changeBillingAddress = false;
$scope.shippingAddress = {};
$scope.billingAddress = {};
$scope.setBillingAddress = function (){
$scope.changeBillingAddress = true;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.cancelBillingAddress = function (){
$scope.changeBillingAddress = false;
$scope.billingAddress = $scope.shippingAddress;
};
$scope.openCompanyModal = function (company){
$scope.billingAddress = company;
$scope.shippingAddress = company;
};
$scope.submit = function (){
console.log("Form submitted");
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<form name="addressForm" ng-submit="submit()">
<div ng-form="shippingForm">
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Lieferadresse</label>
</h3>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="shippingAddress.salutation" class="form-control" ng-change="refreshBillingAddress()" ng-required="true">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted && shippingForm.salutation.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firsname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="shippingAddress.prename" ng-required="true" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.prename.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="shippingAddress.surname" required="" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.surname.$error.required">Required</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="shippingAddress.company" required="" ng-minlength="10" class="form-control" ng-change="refreshBillingAddress()"/>
<span ng-show="submitted && shippingForm.company.$error.required">Required</span>
<span ng-show="submitted && shippingForm.company.$error.minlength">Minlength = 10</span>
</div>
</div>
</div >
<div class="row">
<div class="col-md-12">
<h3 class="form-group">
<label>Rechnungsadresse</label>
<div ng-click="setBillingAddress()" ng-show="changeBillingAddress === false" class="btn btn-default pull-right">Ändern</div>
<div ng-click="cancelBillingAddress()" ng-show="changeBillingAddress === true" class="btn btn-danger pull-right">Abbrechen</div>
</h3>
</div>
<div ng-show="changeBillingAddress == false" class="row">
<div class="col-md-offset-1">Identisch mit Lieferadresse</div>
</div>
</div>
<div ng-show="changeBillingAddress == true">
<div style="margin-top: 5px">
<div ng-form="billingForm">
<div class="row form-group">
<div class="col-md-4">
<label>Salutation</label>
</div>
<div class="col-md-8">
<select name="salutation" ng-model="billingAddress.salutation" ng-required="changeBillingAddress == true" class="form-control">
<option></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span ng-show="submitted" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Firstname</label>
</div>
<div class="col-md-8">
<input type="text" name="prename" ng-model="billingAddress.prename" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.prename.required" class="help-block">Pflichtfeld</span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Lastname</label>
</div>
<div class="col-md-8">
<input type="text" name="surname" ng-model="billingAddress.surname" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.surname.$error.required"></span>
</div>
</div>
<div class="row form-group">
<div class="col-md-4">
<label>Company</label>
</div>
<div class="col-md-8">
<input type="text" name="company" ng-model="billingAddress.company" ng-required="changeBillingAddress == true" class="form-control"/>
<span ng-show="submitted && billingForm.company.$error.required"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div style="padding-top: 1em" class="col-md-12">
<button ng-click="previousTab(0)" class="btn btn-default pull-left">Back</button>
<button type="submit" class="btn btn-default pull-right">Next</button>
</div>
</div>
</form>
</body>
</html>
Here is your plunker, i corrected some parts (until Rechnungsaddresse):
http://plnkr.co/edit/luVETXTVCf2PkNAKzK1Z?p=preview
I guess you can use <form name="addressForm"... or <div ng-form="addressForm"
but both seems to make problems.
submitted was never set, so i added it in the way i guess you intended
Related
I was able to get the value for Description (textarea) from the first service (selected input) (which is right), for the attribute of data id, but I'm having a problem getting it from appended elements, after using the add more button
What am I missing, please?
Below is my code and I can explain further if need be.
<div class="service-box">
<div class="row">
<div class="col-md-12 service-group">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div >
<select type="text" class="form-select" placeholder="Services" value="" name="service" id="service">
<option value="" disabled selected>Select your option</option>
#foreach ($services as $service)
<option value="{{$service->service_name}}" data-id="{{$service->description}}">{{$service->service_name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div >
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" id="description" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
$("#addmore").click(function() {
var serviceGroupHTML = $('.service-group').html();
$( ".service-box" ).append(serviceGroupHTML);
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
<!-- This is where the problem lies -->
const service = new Array(document.getElementById("service"));
const description = new Array(document.getElementById("description"));
service[0].addEventListener("change", function(){
description[0].value = $('#service option:selected').data('id');
})
service[1].addEventListener("change", function(){
description[1].value = $('#service option:selected').data('id');
})
As your newly created element are dynamic so you need to bind it with static element. Then, you can get the value of the data-attribute by using $(this).find("option:selected").data("id") and assign this to your textarea of that particular group .
Demo Code :
$("#addmore").click(function() {
$('.service-group:first').clone().find("input:text,textarea").val("").end()
.appendTo('.service-box');
});
$("#remove").on("click", function() {
$(".service-box").children().last().remove();
});
$("body").on("change", "select[name=service]", function() {
//get description for data-attribute
var description = $(this).find("option:selected").data("id");
//assign value
$(this).closest(".service-group").find("textarea[name=description]").val(description)
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="service-box">
<div class="row service-group">
<div class="col-md-12">
<div class="row">
<div class="form-group mb-3 col-md-6">
<label class="form-label">Service</label>
<div>
<select type="text" class="form-select" placeholder="Services" value="" name="service">
<option value="" disabled selected>Select your option</option>
<option value="1" data-id="This test">XYZ</option>
<option value="1" data-id="This test22">Z22</option>
<option value="1" data-id="This test33">YZ33</option>
</select>
</div>
</div>
<div class="form-group mb-3 col-md-6">
<label class="form-label">Amount</label>
<div>
<input type="text" class="form-control" name="amount" id="amount" placeholder="Amount">
</div>
</div>
<div class="form-group mb-3 col-md-12">
<label class="form-label">Description</label>
<textarea class="form-control" name="description" rows="6" placeholder="Content.." readonly></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<button type="button" id="addmore" class="btn btn-default">Add more</button>
<button type="button" id="remove" class="btn btn-default">Remove</button>
</div>
I am trying to calculate multiple values based on multiple selections from a and then have the data add up and display in an on the same form. I tried some jquery stuff but didn't really work at all. I've tried using some Javascript to do the calcultions but nothing seems to be happening.
Blade:
#extends('layout.layouts')
#section('content')
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>NCIC - Reports</title>
</head>
<body>
<br>
<h1>New Report</h1>
<br>
<form action="{{ 'storereport' }}" method="POST" enctype="multipart/form-data">
#csrf
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="form-group">
<label for="author">Reporting Officer</label>
<input type="text" class="form-control" name="author" value="{{ Auth::user()->name }}">
</div>
<div class="form-group">
<label for="profileid">SSN</label>
<input type="text" class="form-control" name="profileid">
</div>
<div class="form-group">
<label for="report">Report</label>
<textarea class="form-control" name="report" rows="10"></textarea>
</div>
<div class="form-group">
<label for="selectpicker">Select Offences</label>
<select class="selectpicker" id="lawspicker" name="laws[]" data-width="100%" data-live-search="true" multiple>
#foreach($laws as $law)
<option value="{{ $law->name }} {{ $law->fine }} {{ $law->months }}">Offence: {{ $law->name }} </option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment">
</div>
<hr style="background-color:white;">
<button type="submit" class="btn btn-success">Submit</button>
<a class="btn btn-info float-right" href="{{ route('reports') }}">Main menu</a>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#lawspicker").keyup(function(){
$("#punishment").val(parseFloat($("{{ $law->months }}").val()) + parseFloat($('{{ $law->fine }}').val()));
})
$("#lawspicker").change(function(){
$("#punishment").val(parseInt($("#lawspicker").val());
})
</script>
<style>
body{
background-color: #353b48;
color:white;
}
</style>
</html>
#endsection
To clarify, I want {{ $law->months }} & {{ $law->fine }} to add up and then display in #punishment <input>
Thanks for looking!
You can do some thing like this.
Update <option> tag to this
<option data-fine="{{$law['fine']}}" data-months="{{$law['months']}}" value="{{ $law['name'] }} {{ $law['fine'] }} {{ $law['months'] }}">Offence: {{ $law['name'] }} </option>
and you can get data attribute of the selected <option> tag in your script like this.
`$("#lawspicker").change(function() {
var fine = $(this).find(':selected').data('fine');
let months = $(this).find(':selected').data('months');
$("#punishment").val(parseInt(fine+months));
});`
Thanks.
I would be tempted to replace your select element with checkboxes personally.
An example below using jquery to calculate the fine and months when a button is clicked but could be an event of your choosing. I stripped it back from your example so it was easier to see what is going on.
Checkbox example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-a" data-fine="100" data-months="12" class="custom-control-input offence">
<label for="law-a" class="custom-control-label">Law A</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-b" data-fine="999" data-months="6.5" class="custom-control-input offence">
<label for="law-b" class="custom-control-label">Law B</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" name="laws[]" id="law-c" data-fine="123.5" data-months="8" class="custom-control-input offence">
<label for="law-c" class="custom-control-label">Law C</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Then some javascript (jquery)
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$(".offence").each(function(index, obj) {
if (obj.checked) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
When you click submit, the javascript will loop through each element with the offence class and then read the value of the data-fine and calculate the totals.
An example fiddle: https://jsfiddle.net/dbtas60w/
Multiselect example
<div class="container mt-4">
<div class="row">
<div class="col-12">
<div class="form-group">
<h4>Select Offences</h4>
<div class="d-flex">
<div class="custom-control custom-checkbox">
<select class="selectpicker" id="lawspicker" name="laws[]" multiple>
<option data-fine="100" data-months="12">Law A</option>
<option data-fine="999" data-months="6.5">Law B</option>
<option data-fine="123.5" data-months="8">Law C</option>
</select>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="form-group">
<label for="punishment">Punishment</label>
<input type="text" class="form-control" id="punishment" name="punishment" readonly>
</div>
</div>
<div class="col-12">
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
javascript
$(function() {
$("#submit").click(function() {
let fine = 0;
let months = 0;
$("#lawspicker>option").each(function(index, obj) {
if (obj.selected) {
fine += parseFloat($(obj).data("fine"));
months += parseFloat($(obj).data("months"));
}
})
$("#punishment").val("Fine: "+ fine + " Months: " + months);
})
});
Example fiddle: https://jsfiddle.net/dbtas60w/1/
I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die Teilnahmebedingungen
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
and my script tag
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected() {
if (selectItem.selectedIndex == "1") {
additionalRow.style.display = 'none';
} else {
additionalRow.style.display = 'block';
}
}
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function() {
$.ajax({
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function() {
},
success: function(json) {
if (json['success']) {
$("#result").empty();
for (i in json['success']) {
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
}
// document.getElementById("schedule_form").reset();
}
}
});
});
</script>
<script type="text/javascript">
$.ajax({
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data) {
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
}
});
function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}
</script>
Try variant with detaching/attaching DOM elements
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected() {
if (selectItem.selectedIndex == "1") {
detached = $('#reifenmontage-input').detach();
} else {
detached.appendTo('#additionalRow');
}
}
</script>
I got a problem with my validation of textboxes.
I am trying to get something like this.
Click on the button, give a message when something is not filled in, while you fill the empty textbox, the 1 message of that textbox should dissapear.
If you click the button again, with 1 empty textbox, only the message of that textbox should appear.
If you click it twice with nothing filled, it should only appear once ...
I messed something up here ...
can someone get me on again?
Thank you in advance!
var list2 = [];
function valideer(el) {
divOutput = document.getElementById("msgbox1");
var strValideer = "<ul>";
if (document.getElementById("naam").value === "") {
list2.push("naam");
} if (document.getElementById("voornaam").value === "") {
list2.push("voornaam");
} if (document.getElementById("straatnr").value === "") {
list2.push("straatnr");
} if (document.getElementById("postgem").selectedIndex === 0) {
list2.push("postgem");
} if (document.getElementById("telgsm").value === "") {
list2.push("telgsm");
} if (document.getElementById("email").value === "") {
list2.push("email");
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
function inputChange(el) {
divOutput = document.getElementById("msgbox1");
strValideer = "<ul>";
var naam = document.getElementById("naam").value;
if (naam !== "") {
list2.splice(list2.indexOf(el.name), 1);
}
for (var i = 0; i < list2.length; i++) {
strValideer += "<li><b>" + list2[i] + ": </b>verplicht veld</li>";
}
strValideer += "</ul>";
divOutput.innerHTML = strValideer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="return validate(this)" oninput="inputChange(this)">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onsubmit="valideer(this)" onclick="inputChange(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onsubmit="valideer(this)" onclick="inputChange(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1"><!--lege kolom--></div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
I feel like your approach is a little more complicated than it needs to be.. See my attempt below
function valideer(current) {
var ids = ['naam', 'voornaam', 'straatnr', 'postgem', 'telgsm', 'email'];
var str = '<ul>';
ids.forEach(function(id) {
var el = document.getElementById(id);
if (el.value === '' && el !== current) {
str += "<li><b>" + id + ": </b>verplicht veld</li>";
}
});
str += '</ul>';
var outputDiv = document.getElementById("msgbox1");
outputDiv.innerHTML = str;
}
function handleFormSubmit(ev) {
ev.preventDefault();
valideer();
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="bootstrap/css/bootstrap_custom.min.css" type="text/css" rel="stylesheet" />
<!--lay-out met bootstrap grid-->
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="woodfactory.js" type="text/javascript"></script>
</head>
<body>
<section class="container" id="userform">
<form action="js_form_ontvanger.html" method="get" class="form-horizontal" name="frmUserform" id="frmUserform" onsubmit="handleFormSubmit">
<fieldset>
<legend>Persoonlijke gegevens</legend>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<label class="control-label" for="naam">naam:</label>
<div class="controls">
<input type="text" id="naam" name="naam" placeholder="naam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="voornaam">voornaam:</label>
<div class="controls">
<input type="text" id="voornaam" name="voornaam" placeholder="voornaam" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="straatnr">straat+nr:</label>
<div class="controls">
<input type="text" id="straatnr" name="straatnr" placeholder="straat+nr" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="postgem">post+gem:</label>
<div class="controls">
<select id="postgem" required onclick="valideer(this)">
<option value="">-- maak een keuze --</option>
<option value="2000">2000 Antwerpen</option>
<option value="9000">9000 Gent</option>
<option value="9300">9300 Aalst</option>
<option value="9400">9400 Ninove</option>
<option value="9450">9450 Haaltert</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="telgsm">tel/gsm:</label>
<div class="controls">
<input type="text" id="telgsm" name="telgsm" placeholder="tel/gsm" required onclick="valideer(this)">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">email:</label>
<div class="controls">
<input type="email" id="email" name="email" placeholder="e-mail" required onclick="valideer(this)">
</div>
</div>
<!--einde span7-->
</div>
<div class="span4 valid">
<div id="msgbox1" class="alert alert-error">
<div class="span1">
</div>
</div>
</div>
<div class="span1">
<div class="span1">
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</div>
</fieldset>
<fieldset>
<div class="container">
<div class="row">
<div class="span7">
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="control-group">
<div class="controls">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-success" onclick="valideer(this)">Verzenden</button>
</div>
</div>
<div class="span4 valid">
<div id="msgbox3" class="alert alert-success"></div>
</div>
<div class="span1">
<!--lege kolom-->
</div>
<!--einde row-->
</div>
<!--einde container-->
</div>
</fieldset>
</form>
</section>
<footer class="container">
<p>© 2013 The Wood Factory </p>
</footer>
</body>
</html>
Some notes and observations:
Since the only check being used for validation is if it contains, an empty string, I have generalised the valideer function to iterate and operate on a given array of ids. This can be made even better by querying for inputs on your form using a DOM query and handling it like that.
You have added a lot of inline event handlers in your dom.. Some of them are redundant and not really needed. For example, having a simgle onsubmit on your form element should suffice (no need to add it for every input inside the form)
You were using a global variable list2 this is what was causing the repeated entries each time you click the button. Localising the scope would fix that (by moving it inside a function)
You're already using required property, which means you no longer need a js function to validate if your inputs are empty or not.
You should also notice that list2 is a global variable, which means that you should clean it at the end of every valideer() invocation.
All in all, you code seems very verbose .. try to find a better way to express you needs.
I have the following form. The 'continue' button is meant to be disabled until all fields have been completed. I have tried this on jfiddle and the form works as intended, but on the actual .html file online it does not work. For example the button is always disabled even when the fields have been completed, any ideas?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Payment Gateway</title>
<link rel="stylesheet" type="text/css" href="ue1.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="UE.js"></script>
<script type="text/javascript" language="javascript">
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
</script>
</head>
<body>
<header id="header">
<div class="header1">
Accessibility Tools | Skip to Navigation | Skip to Content | Website A-Z | Sitemap | Report a Problem | Help
</div>
</header>
<div id="mainwrapper">
<div id="contentwrapper">
<div id="content">
<div id="bulogo">
<img src="bulogo.png" alt="BU Logo" style="width:220px;height:128px;">
<div id="bulogo1">
Payment Gateway
</div>
</div>
<p>
<div id="processorder">
Process Order
</div>
<div id="viewordersummary">
View Order Summary
</div>
<div id="lefthelp">
Help
</div>
<div id="progressbar">
<img src="PersonalProgressBar.png" alt="This is your progress">
</div>
<form action="ue.html" method="post" id="nameform">
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*:</label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" id="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
</div>
<input type="submit" id="continue" disabled value="Continue"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
Wrapping your code in document.ready might help.
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
If it's WordPress, be aware that you can't use $ for jQuery. You have to use jQuery('body input') instead, or wrap you code in the following:
$(function(){
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled()) $('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
})(jQuery);
Are you seeing any errors in the console?
Place your code in $(document).ready(function(){ // here }) function as below
$(document).ready(function(){
$('#username, #password, #password1, #email, #email1, #title, #firstname, #surname').bind('keyup', function() {
if(allFilled())
$('#continue').removeAttr('disabled');
});
function allFilled() {
var filled = true;
$('body input').each(function() {
if($(this).val() == '') filled = false;
});
return filled;
}
});
I would try:
$('#continue').prop('disabled',!allFilled());
instead of
if(allFilled()) $('#continue').removeAttr('disabled');
Users may fill out all fields, and then delete one.