Required attribute doesn't work - html

required attribute doesn't work on my form. What am I doing wrong?
Here is my code in HTML:
<form id="main-contact-form" method="POST">
<fieldset class="form-group">
<input id="name" placeholder="Nome" class="form-control" type="text" tabindex="1" required /></fieldset>
<fieldset class="form-group">
<input id="email" placeholder="E-mail" class="form-control" type="email" tabindex="2" required /></fieldset>
<fieldset class="form-group">
<input id="phone" placeholder="Numero di telefono" class="form-control" type="tel" tabindex="3" required /></fieldset>
<fieldset class="form-group">
<textarea id="message" class="form-control" rows="8" placeholder="Scrivi un messaggio.." tabindex="5" required /></textarea></fieldset>
<fieldset>
<button name="submit" class="btn btn-primary" id="submitBtn">Invia Messaggio</button>
</fieldset>
</form>
<div id="feedback"></div>
Here is the php code in the head tag:
<script>
$(document).ready(function(){
$( "#submitBtn" ).click(function( event ) {
//values
var name=document.getElementById('name').value;
var email=document.getElementById('email').value;
var phone=document.getElementById('phone').value;
var message=document.getElementById('message').value;
var dataString = {"name": name, "email":email, "phone": phone, "message":message}
$.ajax({
type:"post",
url:"submitForm.php",
data: dataString,
success: function(html) {
$('#feedback').html(html);
}
});
event.preventDefault();
});
});
</script>

Related

Focus onto next input on Enter key using jQuery script

I'm using this jQuery script to focus onto next input when enter pressed:
$(function() {
$(".form >input").on('keyup', function(e) {
if (e.which === 13) {
$(this).next('input').focus();
}
});
});
It does work with this basic skinny HTML form
<div class="form">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
But not with this one
<div class="form">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" /><br>
<input name="cislo5" type="text" class=cislo5 placeholder="" id="cislo5" /><br>
<input name="cislo6" type="text" class=cislo6 placeholder="" id="cislo6" /><br>
<input name="cislo7" type="text" class=cislo7 placeholder="" id="cislo7" /><br>
<input name="cislo8" type="text" class=cislo8 placeholder="" id="cislo8" /><br>
<input name="cislo9" type="text" class=cislo9 placeholder="" id="cislo9" /><br>
<input name="cislo10" type="text" class=cislo10 placeholder="" id="cislo10" /><br>
<input name="cislo11" type="text" class=cislo11 placeholder="" id="cislo11" /><br>
</div>
What seems to be the problem here? Help me please, I'm stuck
The issue here is you are using direct child selector like:
$(".form > input")
This only matches any direct input element inside form class, but in your next example input is not the direct child. So, you need to descent sector instead like:
$(".form input")
This will match any input inside the form class where it is a direct child or not.
Also, you need to replace
$(this).next('input').focus();
with this:
$(this).nextAll('input:first').focus();
This is needed because .next() will get the immediately following sibling of each element, but here input is not the immediate sibling. We also have some <br> in between which are causing the issue. This can be resolved using .nextAll('input:first') instead.
Demo:
$(function() {
$(".form input").on('keyup', function(e) {
if (e.which === 13) {
$(this).nextAll('input:first').focus();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
<p class="cislo">
<input name="cislo1" type="text" class=cislo1 placeholder="" id="cislo1" autofocus onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo1.value=cislo1.value.slice(0,2)" /><br>
<input name="cislo2" type="text" class=cislo2 placeholder="" id="cislo2" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo2.value=cislo2.value.slice(0,2)" /><br>
<input name="cislo3" type="text" class=cislo3 placeholder="" id="cislo3" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo3.value=cislo3.value.slice(0,2)" /><br>
<input name="cislo4" type="text" class=cislo4 placeholder="" id="cislo4" onkeyup="if (/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')" oninput="cislo4.value=cislo4.value.slice(0,2)" /><br>
</p>
</div>

I want to save data generated by HTML form to JSON file

I want to save data generated from a an HTML form to JSON file in my computer, I'm totally new in the field. I have attached below the HTML and JavaScript code.
<form id="test" action="#" method="post">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" />
</div>
<div class="form-group">
<label for="check">Check if you like JavaScript</label>
<input type="checkbox" name="check" value="yes" />
</div>
<div class="form-group">
<label for="select">Select your favorite JavaScript framework</label>
<select name="select" class="form-control">
<option value="none" selected="selected">None</option>
<option value="jquery">jQuery</option>
<option value="angularjs">Angular</option>
<option value="mine">Mine, of course!</option>
</select>
</div>
<div class="form-group">
<label for="message">Leave a message</label>
<textarea class="form-control" name="message" rows="15" cols="30"></textarea>
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" type="text" name="email" id="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control" type="password" name="password" id="password" />
</div>
<p>
<input type="submit" value="Send" class="btn btn-primary btn-block" />
</p>
</form>
<pre id="output"></pre>
(function() {
function toJSONString( form ) {
var obj = {};
var elements = form.querySelectorAll( "input, select, textarea" );
for( var i = 0; i < elements.length; ++i ) {
var element = elements[i];
var name = element.name;
var value = element.value;
if( name ) {
obj[ name ] = value;
}
}
return JSON.stringify( obj );
}
document.addEventListener( "DOMContentLoaded", function() {
var form = document.getElementById( "test" );
var output = document.getElementById( "output" );
form.addEventListener( "submit", function( e ) {
e.preventDefault();
var json = toJSONString( this );
output.innerHTML = json;
}, false);
});
})();
Instead of displaying the JSON content I want to store it in a JSON file.

Form no action -> post using autopilot

I am using an external program, "Autopilot" to essentially capture my form (For my marketers). However, I have made a form that does not require any "action" on post, eg, I don't want the page to go anywhere, instead I want #answer-button to act as a button which goes to the next question. (I have buttons before the form which go to the next question).
So my question is, how do I go about creating a form that doesn't reload the page, but still posts data using " action='something' "?
my code
<form id="email-gate-form" action="">
<input type="text" placeholder="FIRST NAME" name="first-name" required>
<input type="text" placeholder="LAST NAME" name="last-name" required>
<input type="text" placeholder="EMAIL" name="email" required>
<input type="text" placeholder="COMPANY" name="company" required>
<input type="submit" value="GET MY RESULTS" name="submit" id="answer-button" class="question-form-gate">
</form>
A small peak into my javascript
$("#answer-button").click(function(e) {
e.preventDefault();
});
var emailGateButton = $("#email-gate .question-form-gate");
emailGateButton.on('click', function () {
questionsOverlay.show();
TweenMax.staggerTo("#email-gate .animated", 0.25, {opacity: 0}, 0.25, "-=0.5")
setTimeout(function(){
emailGate.hide();
},1000)
setTimeout(function(){
questionFinal.show();
TweenMax.staggerFrom("#section-final .animated", 0.25, {opacity: 0}, 0.25, "-=0.5")
},1000)
setTimeout(function(){
questionsOverlay.hide();
},3000);
});
any help greatly appreciated.
<form id="email-gate-form" method="post">
<input type="text" placeholder="FIRST NAME" name="first-name" required>
<input type="text" placeholder="LAST NAME" name="last-name" required>
<input type="text" placeholder="EMAIL" name="email" required>
<input type="text" placeholder="COMPANY" name="company" required>
<input type="submit" value="GET MY RESULTS" name="submit" id="answer-button" class="question-form-gate">
</form>
$("#email-gate-form").submit(function(e) {
e.preventDefault();
process_form();
});
function process_form() {
var name = $("input[name=first-name]").val();
console.log(name);
// do whatever you need to do with your varables
}

Validation of angular form without submit button

I am using anuglar.js form validation.
I want to check validation without form submit button.
This is my html.
<form name="userForm">
<input type="hidden" ng-model="StandardID" />
<div class="form-group">
<label for="email">Name:</label>
<input type="text" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<span ng-show="userForm.Name.$dirty && !userForm.Name.$valid">Name is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<button type="submit" class="btn btn-info" ng-click="update()">Submit</button>
<button type="submit" class="btn btn-info" data-dismiss="modal">Cancel</button>
</form>
My controller js is.
$scope.update= function () {
alert($scope.userForm.Name.$valid);
if ($scope.userForm.Name.$valid) {
alert("Entry added");
}
}
It shows small dialog that says this field is required. I don't want this popup . Why span section does not show?
To do it, the key is use the name attribute in your <form> and in all of your inputs.
Following this way, angularjs will create a form instance where you can access all fields like myForm.myInput.$invalid
For example:
<form name="myForm" novalidate>
<label>My Input:</label>
<input type="text" name="myInput" ng-model="myInput" required>
<span ng-show="myForm.myInput.$dirty && myForm.myInput.$invalid">My Input is invalid.</span>
</form>
Check angular docs
HTML
<div ng-app="myApp">
<form name="cutome_form" ng-submit="submitForm()" novalidate>
<input type="text" name="name" class="form-control" ng-model="Name" placeholder="Name" maxlength="50" required>
<div ng-show="cutome_form.name.$dirty && cutome_form.name.$invalid">
<span class="error" ng-show="cutome_form.name.$error.required">The field is required.</span>
</div>
<div class="form-group">
<label for="pwd">Alias:</label>
<input type="text" name="alias" class="form-control" ng-model="Alias" placeholder="Alias" maxlength="50" required>
</div>
<div ng-show="cutome_form.alias.$dirty && cutome_form.alias.$invalid">
<span class="error" ng-show="cutome_form.alias.$error.required">The field is required.</span>
</div>
<button type="submit" ng-disabled="cutome_form.$invalid">Submit All</button>
</form>
</div>
directive
.directive('ngModel', function() {
return {
require: 'ngModel',
link: function(scope, elem, attr, ngModel) {
elem.on('blur', function() {
ngModel.$dirty = true;
scope.$apply();
});
ngModel.$viewChangeListeners.push(function() {
ngModel.$dirty = false;
});
scope.$on('$destroy', function() {
elem.off('blur');
});
}
}
});

HTML Form is submitted without to be populated on iOS devices

I have simple html form on my site:
<form action="mailer.php" method="post">
<fieldset>
<div class="column-50">
<div>
<label for="name">Name <span>*</span></label>
<input type="text" id="name" name="name" required>
<span class="mf-error-message">Error! </span>
</div>
<div>
<label for="email">Email <span>*</span></label>
<input type="text" id="email" name="email" required>
<span class="mf-error-message">Error! </span>
</div>
.... // some more fields
<input type="submit" id="submit" name="submit" value="Enter your Information">
</form>
The problem is that on iOS devices ( phone, tablet .. ) form it can be submitted without user to populate required fields.
Why is that? Is there a way to fix it on client side?
This should work. But it will be for all not only for iOS
<form action="mailer.php" method="post" id="myForm">
Then this
var form = document.getElementById('myForm');
form.noValidate = true;
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
alert('Error! You must fill all required fields.');
}
}, false);