I want to make several text fields required with attribute required, but it is not working.
Any idea why? Is it mandatory to do it with JQuery or is there any HTML5 way to do it?
<form method="POST" action="https://my.kendozone.com/tournaments/testlt/users" accept-charset="UTF-8" class="form-horizontal" novalidate="novalidate">
<input type="text" name="firstnames[]" class="form-control" required>
<input type="text" name="firstnames[]" class="form-control" required>
<button type="submit" class="btn btn-primary">Save</button>
</form>
Here is the fiddle
https://jsfiddle.net/xoco70/ezt61gw6/2/
Try this HTML5 Markup
<input type="text" name="firstnames[]" class="form-control" required>
<input type="text" name="firstnames[]" class="form-control" required>
Related
So I wanted to make a form of login to a website and this is my code.
<form method="post" class="form">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
But I cant figure out how to go to other page when I click the Login input. I tried to add href="", but it didnt work because its not an <a> element.
Simply add action="yourPage.html" in your form div.
<form method="post" class="form" action="yourPage.html">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
I have this form in my Spring Boot/Thymeleaf/Bootstrap application:
<form action="/person" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<button type="submit" class="btn btn-primary">Create</button></form>
Now the issue is that when I submit the form it just makes a GET request to "/?" url instead of POSTing to "/person".
What could be the reason for that behavior?
<form action="/person" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name">
</div>
<input type="submit" class="form-submit">
</form>
When visiting the "reset password" route of my single-page app and looking at the Chrome browser console, I am greeted with the following warning:
[DOM] Password forms should have (optionally hidden) username fields for accessibility: (More info: goo.gl/9p2vKq)
<form class="searchAccount_form animated fadeIn form-tabular ng-pristine ng-valid ng-scope ng-hide" ng-show="isSet(6)" aria-hidden="true">
<h5>Choose a new password</h5>
<hr class="mt-0">
<p>A strong password is a combination of letters and punctuation marks. It must be at least 6 characters long.</p>
<div class="form-group row">
<label class="col-form-label col-4">New Password</label>
<div class="col-7">
<input autocomplete="new-password" class="form-control ng-pristine ng-untouched ng-valid ng-empty" type="password" ng-model="$parent.new_pass" name="password" ng-attr-type="{{ showPassword ? 'text':'password'}}" aria-invalid="false">
</div>
</div>
<div class="form-group">
<input type="hidden" name="username" value="craig.francis" autocomplete="off" readonly="readonly">
<input type="hidden" name="csrf" value="tr6Gj6w6LczH98" autocomplete="off">
<button type="button" class="btn btn-primary" name="button" ng-click="reset_password()">Continue</button>
<button type="button" class="btn btn-link" name="button" ng-click="setTab(2)">Skip</button>
</div>
</form>
If your question is about getting rid of this warning, you may add a hidden text-box as mentioned in the warning message.
<input type="text" autocomplete="username" ng-hide="true">
You should add text or email input type with autocomplete="username" attribute before all password inputs. It can be disabled or readonly.
<form method="post">
<input type="text" autocomplete="username" value="{{username}}">
or
<input type="email" autocomplete="username email" value="{{username}}">
<input type="password" name="password">
</form>
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" value="Login">
input class is declared.
the problem is the even though the button is clickable,i cant get it to open new_url.
You forgot to mention input type submit.
try below code
<div class="login">
<form action="/new_url" method="POST">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
</div>
Use <input type="submit" value="Login">
instead of
<input type="button" value="Login">
You just need to add one more input value
<input type="Submit" value="login">
I am using Bootstrap 3. I am just unable to create message box which should have 4 rows inside. can anyone please help me? My code is below:
<div class="row">
<div class="col-lg-12">
<form action="" method="POST" enctype="multipart/form-data" id="form_id">
<div class="form-group">
<h5><label for="inputName">Name</label></h5>
<input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
</div>
<div class="form-group">
<h5><label for="inputEmail">Email</label></h5>
<input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<h5><label for="inputMobile">Mobile</label></h5>
<input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
</div>
<div class="form-group">
<h5><label for="inputMessage">Message</label></h5>
<input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
</form>
</div>
</div>
I want my message box something like this.
Your problem is you are not using textarea! Replace the below code:
<input type="text" name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required>
With:
<textarea name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required></textarea>