I have the following simple HTML code and want to add a condition, like if fname <> a then display a
comment "Wrong first name". I have the following code and am unsure where to put the conditional
code. Please help as I am new to HTML!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" `enter code
here`"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<body>
<!DOCTYPE html>
<h2>HTML Forms</h2>
<form action="">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
If fname <> a Then //This is where I go wrong!
alert("Condition met")
end If
</body>
</html>
You can try below code.
<form action="" onsubmit="myFunction()">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=""><br><br>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
function myFunction(){
var fname = document.getElementById("fname").value;
if(fname == '<>')
alert("Condition met")
}
</script>
HTML Inputs have some basic validation that you can implement with their input attributes, like the maxlength, minlength, size, or the pattern attribute that takes a regular expression (if you are familiar with them).
<input type="text" pattern="a" name="fname" id="fname" />
This will force the user to submit exactly the letter "a" as name (just an example of course! You should write a more useful regex).
In case of invalid input, the browser will display an error message.
If you want to go further, and have full control over the (client-side) validation, then you need JavaScript.
<script>
const nameInput = document.getElementById('fname');
if (nameInput.value !== 'the_value_to_check_against') {
alert('Incorrect name');
}
</script>
Learn more here.
PS: This may not work if you are not using HTML5. If it is your code, I suggest you use HTML5 by replacing the first line (. Remove the xmlns attribute in the and also remove the two other .
Related
Let's say this is my html in reactjs/jsx:
<form action="/search-list" method="GET">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
and when i click on the submit buttoin without inputing anything, it make the url like this fname=&lname=
and when i fill anly fname and submit, the url become like this fname=JhonDoe&lname=
Notice here, i didn't fill the lname, yet the lname is here in url which i dont want.
I want, if a field has value, that field should be in url as query params, if not field, that field should not be in url query params.
is it possible to do? how can I do it? All the fields should be optional.
You can use this plain JavaScript to remove the empty inputs from submitting.
<form method="GET" id="myForm">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
<script>
Form = document.getElementById("myForm");
Form.addEventListener('submit',()=>{
if(Form.fname.value == ""){
Form.fname.name ="";
}
if(Form.lname.value == ""){
Form.lname.name ="";
}
Form.submit();
});
</script>
I want to use ‹input› without PHP because my code editor (Glitch.com) doesn't work well with PHP. Is there a way to use ‹input› without server-side code? Example: Somehow stores the input as a variable. This is incorrect, I know but can I do something like this?
<form>
<label for="FirstName">First name:</label>
var input = <input type="text" id="fname" name="fname">
</form>
Then like use a getElementById and replace the text with the input variable.
I know I can use prompt(), but I don't want a window popping up, but something like this:
<form>
<label for="Username">Enter New Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="Submit" value="Submit">
</form>
If you can help,
Thanks!
Update:
What I am trying to accomplish is I am making a scorekeeper, and I want the user to be able to rename themselves. Sorry if I wasn't clear.
You can definetely achieve this using Javascript:
const firstName = document.querySelector('#fname');
const lastName = document.querySelector('#lname');
const submit_button = document.querySelector('input[type="button"]');
const heading = document.querySelector('h1')
submit_button.addEventListener('click', () => {
heading.textContent = "Last Name: " + lastName.value;
})
<h1 class="display-first-name"></h1>
<form>
<label for="FirstName">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="LastName">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" value="Submit">
</form>
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('')">
This format of html form control doesn't pass form data
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label class="field" for="firstName">First Name:</label>
<input type="text">
</fieldset>
<input type="submit">
</form>
but this one does
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label>First Name:</label>
<input type="text" name="firstName">
</fieldset>
<input type="submit">
</form>
Unless I'm missing something obvious, the difference is in the label control..Are both valid and if so, can anyone explain to me why only the second one passes form data to my PHP controller method.
<input type ="submit"> is not part of the fieldset in the first bit of code, but I don't think that's really the issue.
I believe changing the code on the first bit to:
<form action="index.php?action=createNewCustomer"
method="POST">
<fieldset>
<label for = "firstName">First Name: </label>
<input type="text" name = "firstName">
<input type="submit">
</fieldset>
</form>
will work. You need to make sure the name of the input is the same as the property you are trying to set.
i'm trying to avoid the validation in a input of type image but with IE10 seems that doesn't work if the input is a image type.
Someone know a solution to avoid the validation or similar? Thanks in advance.
Here the code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action="demo.asp" method="post">
E-mail: <input type="email" name="userid" required>
<input type="submit">
<input type="submit" formnovalidate value="submit as admin">
<input type="image" formnovalidate value="no validation">
</form>
</body>
</html>
I know it is an older question but you could add the following function:
handleSubmit(element) {
var form = document.forms[0] ;
form.noValidate = !!element.formnovalidate ;
return true;
}
then attach the function to the submit buttons with handleSubmit(this)