<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
In HTML input validation , i have set the pattern of alphebetic only. When testing with numeric input in it , it shows
However, if i correct the input into the alphabets ,it will shows invalid again
I have to refresh the page again to input the correct format only it will not show
invalid. Is this normal?
This is my code:
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" type="text" name="name" autocomplete="off" required />
</div>
You don't clear your setCustomValidity(). If you set a value with setCustomValidity() then the field is invalid. Just add such attribute to your input tag:
oninput="setCustomValidity('')"
Fixed in your code:
<form class="user" action="code_user.php" method="POST">
<div class="form-group">
<label>Enter Full Name</label>
<input class="form-control" pattern="^[a-zA-Z]+(( )+[a-zA-z]+)*$" oninvalid="setCustomValidity('Please enter in alphabets only. ')" oninput="setCustomValidity('')" type="text" name="name" autocomplete="off" required />
</div>
<button type="submit" id="submit"name="signup_btn"class="btn btn-primary btn-user btn-block"> Sign Up </button>
</form>
Related
when I click the 'save new post' button and the title and body content are provided then the action of sending a request is successfull, but if I leave one field blank, than the request isn't even made.
this is my code:
<form action="/create-post" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"></textarea>
</div>
<button class="btn btn-primary">Save New Post</button>
</form>
And this is what I get when I leave a field blank:
form behavor after submitting empty field
in the image, 'Compila questo campo' just means 'Fill in this field'
Edit:
thank you for reminding me that it’s because of the required field, but then why is that in this example i can't submit if the title field is empty but can if the body is empty?
<form class="mt-3" action="/post/<%= post._id %>/edit" method="POST">
<div class="form-group">
<label for="post-title" class="text-muted mb-1"><small>Title</small></label>
<input required name="title" value="<%= post.title %>" id="post-title" class="form-control form-control-lg form-control-title" type="text" placeholder="" autocomplete="off">
</div>
<div class="form-group">
<label for="post-body" class="text-muted mb-1"><small>Body Content</small></label>
<textarea required name="body" id="post-body" class="body-content tall-textarea form-control" type="text"><%= post.body %>
</textarea>
</div>
<button class="btn btn-primary">Save Changes</button>
Note that this is a ejs template, so that's why it as <% and <%=
You have required attribute both of your inputs. So you can't submit this form in this way.
See here for details
For example in this example you can submit the form:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="#" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
But in this example you can't:
<!DOCTYPE html>
<html>
<body>
<h1>The button type attribute</h1>
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" required><br><br>
<button type="submit" value="Submit">Submit</button>
<button type="reset" value="Reset">Reset</button>
</form>
</body>
</html>
Good luck.
You explicitly said that the user was required to fill in a value.
Don't do that if the field is optional.
Because your <input> and <textarea> tags have required attribute. Remove that attribute if you want to make them optional.
You are using required attribute with textbox and text area.
The required attribute is a boolean attribute.
When present, it specifies that an input field must be filled out before submitting the form.
This is client side (browser side validation).
Reference
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>
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>
As we have number of input fields and there are some fields as required example:
<input placeholder="Role" type="text" required/>
<span ng-show="Role" class="text-danger">Role is required.</span>
<input placeholder="Title" type="text" required/>
etc..
<button type="button" ngclick="Savereferences()">Save</button>
Now i want to validate this fields on click of Save button in angular js, Can any one help me out how to do this.
<input placeholder="Role" ng-model="Role" type="text" required/>
<span ng-show="RoleMsg" class="text-danger">Role is required.</span>
<input placeholder="Title" ng-model="Title" type="text" required/>
etc..
<button type="button" ngclick="Savereferences()">Save</button>
JS Code for validating Role
$scope.Savereferences=function(){
if($scope.Role){
$scope.RoleMsg=true;
}
}
You can do like this...using ng-required and form
<form role="form" id="form" name="form" class="form-horizontal">
<input placeholder="Role" id="role" name="role" type="text" ng-required="true"/>
<span ng-show="form.role.$error.required">Role is required.</span>
//Same as other field
<button type="button" ng-disabled="!form.$valid" ngclick="Savereferences()">Save</button>
</form>