I've been able to change the error message when the user has not typed their email in yet, but how do I change the error message when the user types in their email with the wrong format?
This is my code written in Bootstrap 4 style:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="setCustomValidity('')">
</div>
You simply can fix this with adding title to input tag
<input type="email" class="form-control" name="email" id="freeform_email"
placeholder="Enter an email" required="required"
oninvalid="this.setCustomValidity('Enter an email that contains "#". Example: info#roshni.nl')" title="Email: the email contains '#'. Example: info#ros-bv.nl" />
Yours should be then:
<div class="form-group">
<label>Email</label>
<input type="email" name="email" required="" class="form-control" oninvalid="this.setCustomValidity('Please Enter valid email')" oninput="this.setCustomValidity('')" title='<your text>'">
</div>
You're welcome.
Here’s an example of how to do it:
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("#");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Not a valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
You’ll have to change the text inside alert to include your custom message and action_page.php to include your own and add your desired styles all over!
UPDATE
If you don't want to implement your own JavaScript functions then you can just go ahead and add conditions to the oninvalid as follows:
<input type="email" name="email" required="" class="form-control" oninvalid="if (this.value == ''){this.setCustomValidity('This field is required!')} if (this.value != ''){this.setCustomValidity('The email you entered is invalid!')}" oninput="setCustomValidity('')">
Related
i have a form where every email is registered with #scoops.com but every time i have to enter #scoops.com i want that user just enter email name and #scoops.com auto fill and it will also show at the end of input field ? here it is my code
<div class="form-group" autocomplete="off">
<label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
<input autocomplete="nope" type="text" name="email" id="email" class="form-control input-lg"
placeholder="Enter Email" name="name" required=""/>
<span id="error_email"></span>
#if($errors->has('email'))
<div class="alert alert-danger">
{{ $errors->first('email') }}
</div>
#endif
</div>
i want something like this
Since you use Bootstrap: Try to wrap your mail input into an Inputgroup.
And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.
<div class="input-group">
<input autocomplete="off" type="text" name="email" id="email" class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
<div class="input-group-append">
<span class="input-group-text">#scoops.com</span>
</div>
</div>
Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:
<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>
<script>
function submit(inputValue) {
const email = inputValue + "#scoops.com"
// insert here the code (like a POST request) to send the 'email' constant to wherever you want
}
</script>
I am trying to specify a dynamic url in the actions properties of form.
The url will be dependant on what the user enters in the textbox. For example, if the user enters "Fred" as firstname and 1234 as courseId, then the url should be "/users/Fred/course/1234"
This is what I have so far but it is not reading the firstname and courseId.
<form action="/users/{{firstname}}/course/{{courseId}}" method="POST">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>
No php and ajax can be used.
You need javascript to do this
const template = (firstname, courseId) => `/users/${firstname}/course/${courseId}`;
document.getElementById('myForm').addEventListener('submit', function(s) {
s.preventDefault();
this.action = template(this.elements["firstname"].value, this.elements["courseId"].value);
this.submit();
});
<form action="placeholder" method="POST" id="myForm">
<input type="text" placeholder="firstname" name="firstname">
<input type="email" placeholder="email" name="email">
<input type="text" placeholder="courseId" name="courseId">
<input type="submit" value="Submit">
</form>
Here I am having simple html angular form. I have three fields: Username, address and email.
I have added angular required attribute validations. This works well as expected.
But I have a requirement where when I hit Save I should only validate username and address but not email. And when I hit Submit I should validate only email.
<html ng-app="myApp">
<head>
<title>Form Demo</title>
<style>body{font-family:"Arial";background-color:#E2E2DC}</style>
</head>
<body ng-controller="AppController as ctrl">
<form name="loginform" >
UserName<input type="text" ng-model="ctrl.user.username" placeholder="Enter your name" required/><br/><br/>
Address<input type="text" ng-model="ctrl.user.address" placeholder="Enter your Address" required/><br/><br/>
Email<input type="text" ng-model="ctrl.user.email" placeholder="Enter your Email" required/><br/><br/>
<button ng-click='ctrl.submit()'>Save</button>
<button ng-click='ctrl.submit()'>Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js">
</script>
<script>
angular.module('myApp', [])
.controller('AppController', [function() {
var self = this;
self.submit = function() {
console.log('Form is submitted with following user', self.user);
};
}]);
</script>
</body>
</html>
You could tweak your form based on what button you click make field required & optional on demand using ng-required directive
<form name="loginform" novalidate ng-submit="ctrl.submit(loginform)">
UserName
<input type="text" name="username" ng-model="ctrl.user.username" placeholder="Enter your name" ng-required="save"/>
<br/>
<br/> Address
<input type="text" name="address" ng-model="ctrl.user.address" placeholder="Enter your Address" ng-required="save"/>
<br/>
<br/> Email
<input type="email" name="email" ng-model="ctrl.user.email" ng-required="submit" placeholder="Enter your Email"/>
<br/>
<button ng-click="save=true;submit=false;">Save</button>
<button ng-click="submit=true;save=false;">Submit</button>
</form>
Demo Plunker
I'm trying to set a custom error message in an HTML5 form with the required attribute, however it doesn't appear to be working.
Code:
<form role="form" method="post" action="contact-form.php">
<input type="text" class="input-field" name="name" id="name" placeholder="Name" required />
<input type="email" class="input-field" name="email" id="email" placeholder="Email" required />
<textarea name="message" class="textarea-field" id="message" placeholder="Message"></textarea>
<input type="submit" value="Contact Me" class="btn btn-primary btn-xl" />
</form>
<script>
var name = document.querySelector( "#name" );
function setErrorMessage() {
if ( name.validity.valueMissing ) {
name.setCustomValidity( "Please enter your name" );
}
};
setErrorMessage();
name.addEventListener( "change", setErrorMessage );
</script>
Fiddle: http://jsfiddle.net/e4eutova/1/
I've looked round and I thought the syntax was correct, but it doesn't appear to be. Any help would be greatly appreciated!
Nevermind--I found and am using this solution: https://github.com/javanto/civem.js
As far as I know and understand the problem, you aren't calling the function setErrorMessage() anywhere. You need to add onClick="setErrorMessage() in your submit button input description.
Also, I would try changing the code to use document.getElementById("_your_object_id_"); instead. Or getElementsByName().
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##"
onclick="this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);">
<button>Koop: MEMBER</button>
</a>
I want: <input id="textbox" type="text" value="" size="25" required>
to be required when i click: <button>Koop: MEMBER</button>
like: if <input id="textbox" type="text" value="" size="25" required> value=""
its shows an alert like: "No username entered"
Fixed, Thx Lepanto
You need to cleanup your code first. not sure why you're using <a>. Anyway It would be pretty good to validate using onblur()
HTML code:
<input id="textbox" type="text" value="" size="25" required onblur="validateTextBox()">
JavaScript:
function validateTextBox() {
if (document.getElementById("textbox").value != "") {} else {
alert("Please enter a value");
}
}
Check this out in JSFiddle.
Of course, there is no such thing as required attribute in HTML tag textarea.
You have to create your own validation methods using Javascript. One of them is Validation plugin (which requires jQuery).
You have to write a JavaScript function to validation the textbox. Something like below
<script>
function doclick(){
if(document.getElementById('textbox').value != ''){
this.href='https://websitelink.com?naam=' + encodeURIComponent(document.getElementById('textbox').value);
}
else{
alert('No username entered');
}
}
</script>
And call this function in your HTML tag onclick
<b>Gebruikersnaam:</b><br>
<input id="textbox" type="text" value="" size="25" required>
<a id="googleLink" href="##klik nu om member te kopen##" onclick="doclick()">
<button>Koop: MEMBER</button>
</a>