Is there any way to show an error message if a form is empty in AMP(i.e none of the fields have any value?). I tried the following, but it does not seem to work(Please not the div.error node).
<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" custom-validation-reporting="show-first-on-submit">
<p>My Form</p>
<div class="error" visible-when-invalid="valueMissing" validation-for="my-form">
Form is empty could not submit.
</div>
<div>
<input required id="username" type="text" placeholder="username" name="username">
<input required id="password" type="password" placeholder="password" name="password">
</div>
<input type="submit" value="OK">
</form>
Try with validation state invalid like on="invalid:error.show"
invalid : The form's validation state to "invalid" (in accordance with its reporting strategy).
<form method="POST" id="my-form" class="p2" action-xhr="/components/amp-form/submit-form" target="_top" on="invalid:error.show" custom-validation-reporting="show-first-on-submit">
<p>My Form</p>
<div class="error" id="error" hidden>
Form is empty could not submit.
</div>
<div>
<input required id="username" type="text" placeholder="username" name="username">
<input required id="password" type="password" placeholder="password" name="password">
</div>
<input type="submit" value="OK">
</form>
Related
I'm using FormSubmit to create a contact form in my static website (hosted on a server).
My form looks like this:
<div id="contact-area" class="container">
<h1>~$ contactme</h1>
<br>
<form action="https://formsubmit.co/c379c266434ca1a039bdf03209919395" method="POST">
<div class="form-group">
<div class="form-row">
<div class="col">
<input type="text" name="name" class="form-control" placeholder="Your name..." required>
</div>
<div class="col">
<input type="email" name="email" class="form-control" placeholder="Your e-mail" required>
</div>
</div>
</div>
<div class="form-group">
<textarea maxlength="1000" placeholder="Your message..." class="form-control" name="message" rows="10" required></textarea>
</div>
<input type="hidden" name="_template" value="table">
<input type="text" name="_honey" style="display:none">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="message_sent.html">
<button type="submit" class="btn btn-lg btn-dark btn-block">Submit</button>
</form>
</div>
My email is verified. When the user clicks on submit button, this message appears in a new page:
" Make sure your form has the method="POST" attribute "
However, I receive the message. That's weird. Anyone know why it says my form should have POST attribute while my form actually has the post attribute.
Your code snippet is all okay. I have tested it, forms are getting submitted, and nothing wrong except the way you implement the "_next" feature. As FormSubmit documentation clearly mentioned you have to provide an alternative URL not just a path or file, it should be a URL.
<input type="hidden" name="_next" value="https://yourdomain.co/thanks.html">
Please change the hidden filed in your form to:
<input type="hidden" name="_next" value="https://yourdomain.co/message_sent.html">
and that should probably work fine.
Additional information:
FormSubmit documentation: https://formsubmit.co/documentation
I guess you have gone wrong in the action of the form.
Try using this:
<form action="https://formsubmit.co/your#email.com" method="POST">
<!-- Your form inputs here -->
</form>
I am making a html page where you login to see links but I cant get the enter key working
<form name = "myform">
<p style="text-align:center">ENTER USERNAME <input type="text" name="username"></p>
<p style="text-align:center">ENTER PASSWORD <input type="password" name="pword"></p>
<p style="text-align:center"><input type="button" value="Check In" name="Submit" onclick= "validate()">
</p></center>
For your enter button to work, you need to change your button input type to submit.
<!DOCTYPE html>
<html>
<body>
<form action="action_page">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="pword">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I upvoted Darkhouse's answer but wanted to post this most simple version of your code that should also work just fine:
<form name = "myform">
<input type="text" name="username" placeholder="Enter Username">
<input type="password" name="pword" placeholder="Enter Password">
<input type="submit" value="Check In" name="Submit">
</form>
And I think it's not possible to submit the form in Safari browser
This is working fine in all browsers except safari
<form action="/commonDashboard" name="loginForm" method="post" autocomplete="off" id="loginForm">
<div>
<label>User Email ID</label>
<input type="text" placeholder="Enter your Email Address" id="userEmail" name="userEmail" tabindex="1" />
</div>
<div>
<label>Password</label>
<input type="password" placeholder="Enter your password" id="userPassword" name="userPassword" tabindex="2" />
</div>
<div>
<input type="button" value="Sign In" onclick="validatelogin();" tabindex="3" />
</div>
</form>
Change type="button" to type="submit"
Remove onclick="validatelogin();"
Assuming validatelogin is NOT performing any Ajax, change <form action="/commonDashboard" to
<form action="/commonDashboard" onsubmit="return validatelogin()" and have that function return true to allow submit or false to stop
or better add
window.onload=function() {
document.getElementById("loginForm").onsubmit=validatelogin;
}
In any case, please post the function so we can see what it does
Is it possible to change default value of the attribute required that we add to an element in HTML?
For example:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required />
<input type="submit" value="Notify Me" />
</form>
I do believe that the HTML code block you have given ought be as below:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required="required" />
<input type="submit" value="Notify Me" />
</form>
And if you wanted to remove it completely:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" />
<input type="submit" value="Notify Me" />
</form>
Obviously as you have no URL address in the ACTION attribute of the form, the form will POST back to itself (ie. meaning the page it is hosted on, so if it was on your contact.aspx form it will post back to contact.aspx)
The 3 forms allow access as member, guest or then as newly registered.
However if someone clicks on the lower part of the form it automatically sends the cursor to the top part.
<form action="schlogin.php" method="post">
<fieldset>
<legend>Member's Login</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value=""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<input type="submit" name="login" class="loginButtons" value="login"/>
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>Guest Player</legend>
<input type="submit" name="guest" class="loginButtons" value="Play as GUEST!" />
</label>
</br>
</fieldset>
</form>
<form action="schlogin.php" method="POST">
<fieldset>
<legend>FAST Register</legend>
<label for="username">Username:
<input type="text" name="username" id="username" value =""/>
</label>
</br>
<label for="password">Password:
<input type="password" name="password" id="password"/>
</label>
</br>
<label for="email">E-mail:
<input type="text" name="email" value=""/>
</label>
</br>
<input type="submit" name="register" class="loginButtons" value="I WANT TO PLAY TOO!"/>
</label>
</br>
I've forgotten my password:
<input type="submit" name="forgotten" class="loginButtons" value="Send me a new password!"/>
</label>
</br>
</fieldset>
</form>
Validate, validate, validate.
You have duplicate id attributes, so the labels in your second form are for the inputs in the first form.
In your second form change
<label for="username">Username:
<input type="text" name="username" id="username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
to:
<label for="register_username">Username:
<input type="text" name="username" id="register_username" value ="<?php if (isset($username)){echo $username; }?>"/></label></br>
or whatever you like.
The point is that the id for every html element should always be unique. And the label element's for attribute should match it's associated input element's id attribute.