<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>
Related
I am trying to assign a HTML text attribute's value to a hidden attribute's value.
The text code:
<input type="text" name="number" id="number" maxlength="4" onBlur="myno=this.value; concatno=myno.concat('0001')" />
I've used alert to try the output of the concatno value. For example, if user enter 1010, then the output will be 10100001.
Then my hidden code:
<input type="hidden" id="hide" name="hide" value=concatno>
I want my hidden value to be 1010001, but instead the value became "concatno". How should I assign the value in my hidden attribute?
The problem here is that you never updated your #hide element.
You need to use some javascript, for example:
document.getElementById('hide').value = concatno;
Working snippet:
<input type="text" name="number" id="number" maxlength="4" onkeyup="var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id="hide" name="hide" value=concatno disabled>
Note that even if the event is not the issue here, I suggest you to use another trigger, like onkeyup, so that the value is updated more often.
I've also changed your hidden element to disabled to make it visual.
Moreover, you should learn to avoid inline JavaScript.
Here is how I'll do it:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input id="hide" name="hide" value=concatno disabled>
Documentation: getElementById
Hope it helps.
The issue is that you never actually update the value of your #hide element. You need to set its value inside of your event binding (just made the input visible for reference):
<input type="text" name="number" id="number" maxlength="4" onblur="var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.log(concatno)" />
<input type="text" id="hide" name="hide" value=concatno disabled />
It's also worth noting though, that you should generally avoid using obtrusive event handlers. Instead, delegate event handling to external Javascript. This way, your designer doesn't need to understand or even worry about the JS.
Here's an example using unobtrusive handlers:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});
<input type="text" name="number" id="number" maxlength="4" />
<input type="text" id="hide" name="hide" placeholder="concatno" disabled />
Try using name/id instead;
<input type="text" name="number" id="number" maxlength="4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type="hidden" id="hide" name="hide" />
without inline scripts:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});
<input type="text" name="number" id="number" maxlength="4" autofocus='' />
<input type="hidden" id="hide" name="hide" />
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('')">
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().
I want to tigger the button name=buttonexecute when ever user press Enter key. Can some one help me in this pls.
<div class="mytext1" style="height: 40px;">
<br>
<form id="myform" method="post" style="font-size: 22px">Text :
<input type="text" id="search_text" name="search_text" size="44" autofocus>Extension :
<input type="text" id="search_extension" name="search_extension" size="4" maxlength="4"> Sub Files
<input type="checkbox" id="subfolder" name="subfolder" value="0"> LTO-No.
<input type="text" id="search_ltono" name="search_ltono" size="4" maxlength="4">
<input name="buttonExecute" id="endereco"
type="button" value="Show "
onclick="ajaxFunction(search_text.value,search_ltono.value,search_extension.value)"
autofocus>
</form>
</div>
I solved it with the following.
function searchKeyPress(e)
{
// look for window.event in case event isn't passed in
if (typeof e == 'undefined' && window.event) { e = window.event; }
if (e.keyCode == 13)
{
document.getElementById('endereco').click();
}
}
Text : <input type="text" onkeypress="searchKeyPress(event);" id="search_text" name="search_text" size="44" autofocus >
<input type="text" id="search_extension" name="search_extension" onkeypress="searchKeyPress(event);" size="4" maxlength="4">
Sub Files <input type="checkbox" id="subfolder" name="subfolder" onkeypress="searchKeyPress(event);" value="0">
LTO-No. <input type="text" id="search_ltono" name="search_ltono" onkeypress="searchKeyPress(event);" size="4" maxlength="4">
This works fine.
In your case, since you are using inline onclick handler on buttonExecute button, you an then do something like this:
document.getElementById('myform').onkeyup = function (e) {
e = e || window.event;
if (e.keyCode === 13) {
document.getElementById('endereco').onclick();
// or: ajaxFunction(search_text.value, search_ltono.value, search_extension.value)
}
}
Proper way. But what you should really do is to use onsubmit event and use button type submit. Then instead of this shenanigans with Enter key events you could use this:
<form id="myform" method="post" onsubmit="ajaxFunction(search_text.value,search_ltono.value,search_extension.value)">
<!-- ... -->
<input name="buttonExecute" id="endereco"
type="submit" value="Show "
autofocus>
</form>
onsubmit event is fired on submit button clicks and Enter keys, exactly what you need.
<form class="form-asd" role="form">
<h2 class="form-signin-heading">login</h2><hr />
<label class="control-label" for="username">Username</label>
<input class="form-control" type="email" required="" placeholder="username"data-error="enter username"></input>
<label class="control-label" for="username">password</label>
<input class="form-control" type="password" required=" " placeholder="Password"></input>
<label class="checkbox"></label>
<button class="btn btn-lg btn-primary " type="submit">submit</button>
</form>
how can we change this default message of popover of the require field "Please fill out this field "to "please enter username"
You can use setCustomValidity function when oninvalid event occurs.
Like below:-
<input class="form-control" type="email" required=""
placeholder="username" oninvalid="this.setCustomValidity('Please Enter valid email')">
</input>
Update:-
To clear the message once you start entering use oninput="setCustomValidity('') attribute to clear the message.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Combination of Mritunjay and Bartu's answers are full answer to this question. I copying the full example.
<input class="form-control" type="email" required="" placeholder="username"
oninvalid="this.setCustomValidity('Please Enter valid email')"
oninput="setCustomValidity('')"></input>
Here,
this.setCustomValidity('Please Enter valid email')" - Display the custom message on invalidated of the field
oninput="setCustomValidity('')" - Remove the invalidate message on validated filed.
And for all input and select:
$("input[required], select[required]").attr("oninvalid", "this.setCustomValidity('Required!')");
$("input[required], select[required]").attr("oninput", "setCustomValidity('')");
I wanted to change the text of the textarea. This method helped
<form action="/action_page.php" method="post">
<input type="text" required placeholder="username" oninvalid="this.setCustomValidity('Error validate')" oninput="setCustomValidity('')">
<br><br>
<textarea placeholder="Ko’cha, uy, xonadon" name="address" required oninvalid="this.setCustomValidity('Majburiy maydon')" oninput="setCustomValidity('')"></textarea>
<input type="submit" value="Submit">
</form>
$("input[required]").attr("oninvalid", "this.setCustomValidity('Say Somthing!')");
this work if you move to previous or next field by mouse, but by enter key, this is not work !!!