<div align="center" class="cust_book2">
<u><h1>Catering service</h1></u>
<form class="box" action="http://127.0.0.1:8000/cateringservice/" method="post">
{% csrf_token %}
Service Name:<input type="text" name="catername" class="sname" required><br><br>
Name:<input type="text" name="catername1" class="name" required><br><br>
Price per head:<input type="text" name="caterprice" class="Price" required><br><br>
Mobile:<input type="text" name="caternum" class="num" required><br><br>
Email:<input type="text" name="cateremail" class="email" required><br><br>
<div>
<button class="cust_btn2" type="submit">ADD</button>
</div>
</form>
</div>
I have tried that to enable the required field but It is not working . It is submitting without the required field. I am expecting to required will be work
I have a small HTML form created that has a required input field; when I hover the mouse over the field, it shows the message "Please fill in this field" but when I click the button to submit, the error message does not display.
Here is the section of code containing the input field and button:
Web Word Count App
</div>
<div>
<textarea id="paragraph" rows="5" cols="35" placeholder="Enter the paragraph here..." value="" required="true" >Enter the paragraph here...
</textarea>
</div>
<div>
<input type="text" id="word" placeholder="Enter the keyword here..." value="" required="true" >
</div>
<div>
<input type="text" class="display" id="display-1" readonly=1 placeholder="Total word count = 0 " value=""><br>
<input type="text" class="display" id="display-2" readonly=1 placeholder="Keyword does not exist!" value=""><br>
<input type="text" class="display" id="display-3" readonly=1 placeholder="Total keyword appearances = 0" value="">
</div>
<div>
<button class="wwcbutton" onclick="Word_count();">Total words?</button>
</div>
<div>
<button class="wwcbutton" onclick="Check();">Check keyword appearance</button>
</div>
<div>
<button class="wwcbutton" onclick="keyword_count();">Total keyword appearances?</button>
</div>
<div>
<button class="wwcbutton-clear" onclick="Clear();">Clear</button>
</div>
Could someone please advise me as to what might be wrong here. Thanks
<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>
I have a php form with angularjs code. The initial screen looks like
Before submit
Once the user submit the form I would like to blank out all fields, However the following code doesnot seem to do so for the field, but does for the button.
after submit
Before
After
the form and code is as follow, i tried blanking the email field. The button is changed so I know it going thru the angularjs code.
<!-- Contact Section Angularjs -->
<div id="myapp" ng-controller="contacts_empcontroller">
<div id="contact" class="w3-container w3-padding-16" >
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Contact</h3>
<form id="contact_02" >
<p><h4> If you would like to book an event or conference please contact us.</h4></p>
<p ng-bind="msg1"></p>
<input id="name1" class="w3-input w3-section" type="text" placeholder="Name" required name="Name" value=" " ng-model="name1">
<input id="email1" class="w3-input w3-section" type="text" placeholder="Email" required name="Email" value="" ng-model="email1">
<input id="subject1" class="w3-input w3-section" type="text" placeholder="Subject" required name="Subject" value="" ng-model="subject1">
<input id="comment1" class="w3-input w3-section" type="text" placeholder="Comment" required name="Comment" value="" ng-model="comment1">
<input id="token1" class="w3-input w3-section" type="hidden" name="token1" value="<?php echo $token;?>" >
<button class="w3-button w3-black w3-section" ng-click="postData()" id="buttoncontact" >Send Message</button></p>
</form>
</div>
</div>
Angularjs code
if (data.success == "ip_over_2")
{
document.getElementById("buttoncontact").innerHTML = "Duplicate - Thanks";
document.getElementById("email1").innerHTML = "-";
}
Thanks for any help
Second form
<div class=" col-sm-4 ">
<div id="myapp" ng-controller="subscribe_controller">
<h4 style="color:black;" >Subscribe To Newsletter</h4>
<form id="subscribe_01">
<h4>
<p ng-bind="msg2"></p>
<input id="email2" style="color:gray;" type="text" name="EMAIL" placeholder="Your Email Adddress" value="" ng-model="email2" required ></h4>
<input id="token2" class="w3-input w3-section" type="hidden" name="token2" value="<?php echo $token;?>" >
Enter Code: <font size="3" color="blue"><?php echo $captcha_token;?> </font>  
<input id="captcha" type="text" placeholder="Code" name="captcha" value="" ng-model="captcha" size="10" required>
<p><p>
<button class="w3-button w3-black" ng-click="postData_subscribe()" id="buttoncontact_subscribe">Send To Subscribe</button></p>
</form>
</div>
Instead of document.getElementById("...").innerHTML; just do:
$scope.name1 = '';
$scope.email1 = '';
$scope.subject1 = '';
$scope.comment1 = '';
This will update your model (ng-model="email1") with the specified value, in this case a blank value (as you specified was the goal).
The problem: In my HTML sign-up form, I have 18 elements. Each element has a tabindex, starting with the first text input at 1 to the last form element at 18.
When I start out with the first text input, fill out the information and then tab . . . it goes nowhere. At least, that's what it seems to me. Then I tab again, and it goes to text input with tabindex="2" and I have no idea why this is. I get into one form field, then I have to tab 2 x to get to the next.
This is how half of the form reacts. This form is spread out over two columns. There are no elements that would separate the left part of the form from the right part of the form -- except for the layout, of course. The kicker is that the right part of the form behaves correctly. What gives?
And here's the pertinent code:
<form id="form1" name="form1" class="bsf-form topLabel page1" autocomplete="off" enctype="multipart/form-data" method="post" novalidate><!--534-->
<div id="billing-form-columns" class="row"><!--536-->
<div id="billing-column-1" class="span8"><!--537-->
<!--legend>Billing Information</legend-->
<!--div class="sub-legend">Please provide your billing and payment information.</div-->
<!-- ERRORS -->
<div id="errors" class="alert alert-error">
<!--button type="button" class="close" data-dismiss="alert">×</button-->
<div class="err-info"><span class="err-txt">Please address the following issues before the order can be placed:</span></div>
<div class="error-columns clearfix">
<div class="err-col-left"></div>
<div class="err-col-right"></div>
</div>
</div>
<!--SUCCESS-->
<div id="success" class="alert alert-success"></div>
<div class="row-fluid height60">
<label class="desc" for="companyName">Company Name<span class="req">*</span></label>
<input type="text" id="companyName" name="companyName" class="input-xxlarge xxlarge-redux focus" value="" tabindex="1" placeholder="" title="Enter the name of your company" />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="firstName">Full Name<span id="req_2" class="req">*</span></label>
<input type="text" id="firstName" name="firstName" class="input-large" value="" tabindex="2" placeholder="" title="Enter your first name. If there is another name on the credit card, you can enter that below with the credit card information." />
<input type="text" id="lastName" name="lastName" class="input-large" value="" tabindex="3" placeholder="" title="Enter your last name. If there is another name on the credit card, you can enter that below with the credit card information." />
</div><!--/row-->
<div class="row-fluid height60">
<label class="desc" for="address">Address<span class="req">*</span></label>
<input type="text" id="address" name="address" class="input-xxlarge xxlarge-redux" value="" tabindex="4" placeholder="" title="Enter your billing address"/>
</div><!--/row-->
<div class="row-fluid height45">
<label class="desc" for="address2"></label>
<input type="text" id="address2" name="address2" class="input-xxlarge xxlarge-redux" value="" tabindex="5" placeholder="Address 2 (optional)" title="This field for a second address (suite, apartment, department, etc.) is optional"/>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="city">City<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="spr1">State / Province / Region</label></span>
</div>
<input type="text" id="city" name="city" class="input-large" value="" tabindex="6" placeholder="" title="Enter the city for your billing address" />
<input type="text" id="spr1" name="spr1" class="input-large" value="" tabindex="7" placeholder="" title="Enter the state, province or region associated with your credit card" />
</div><!--/row-->
<div class="row-fluid clearfix" id="city-state">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="pzc">Postal / ZIP Code<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="country">Country<span class="req">*</span></label></span>
</div>
<input type="text" id="pzc" name="pzc" class="input-large" value="" tabindex="8" placeholder="" title="Enter the Postal or ZIP Code associated with your credit card" />
<select id="country" name="country" class="width210" tabindex="9" title="Select the name of the country associated with your credit card" >
<option value="" selected="selected"></option>
<option value="US" >United States</option>
<option value="UK" >United Kingdom</option>
<option value="AU" >Australia</option>
<option value="ZM">Zambia</option>
<option value="ZW">Zimbabwe</option>
</select>
</div><!--/row-->
<div class="row-fluid height60 clearfix">
<div class="label-two clearfix">
<span class="desc-left"><label class="desc" for="emailField">E-mail<span class="req">*</span></label></span>
<span class="desc-right"><label class="desc" for="phoneIntl">Phone Number<span class="req">*</span></label></span>
</div>
<input type="text" id="emailField" name="emailField" class="input-large" value="" tabindex="10" placeholder="" title="Enter a valid e-mail address" />
<input type="text" id="phoneIntl" name="phoneIntl" class="input-large" value="" tabindex="11" placeholder="" title="Enter a valid phone number where we can reach you" />
</div><!--/row-->
</div><!--537-->
<div id="billing-column-2" class="span8"><!--860-->
<div class="cc-validator clearfix">
<div class="row-of-cards height60 clearfix">
<span class="visa">Visa</span>
<span class="mastercard">MasterCard</span>
<span class="amex">American Express</span>
<span class="discover">Discover</span>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" for="card_number">Credit Card Number<span class="req">*</span></label>
<input type="text" id="card_number" name="card_number" class="input-medium focused width210" value="" tabindex="12" placeholder="Credit Card Number" title="Enter a current and valid credit card number for any of the cards listed above." />
</div>
<div class="row-fluid height60 clearfix">
<div class="label-two-apart clearfix">
<span class="desc-left-apart-269"><label class="desc" for="expiry_date">Expiration Date<span class="req">*</span></label></span>
<span class="desc-right-apart-left"><label class="desc" for="cvv">Security Code<span class="req">*</span></label></span>
</div>
</div>
<div class="input-two-apart-850 clearfix">
<div class="input-left-apart clearfix">
<span class="month-year">
<select id="month-list" name="month-list" tabindex="13" title="Select the credit card expiration date (month and year)."></select>
<select id="year-list" name="year-list" tabindex="14" title="Select the credit card expiration date (month and year)."></select>
</span>
<span class="cvv-code">
<input type="text" id="cvv" name="cvv" class="input-mini" maxlength="3" value="" tabindex="15" placeholder="" title="Enter the security code from the back of your credit card. If you have an American Express card, the security code is on the front of the card." />
</span>
</div>
<div class="input-right-apart clearfix"></div>
</div>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-name-on-cc-card" for="name_on_card">Name on Credit Card<span class="req">*</span></label>
<input type="text" name="name_on_card" id="name_on_card" class="input-medium focused width210" value="" tabindex="16" placeholder="" title="Enter the name as it appears on the credit card"/>
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password1" for="password1">Password<span class="req">*</span></label>
<input type="password" name="password1" id="password1" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Enter a password containing uppercase and lowercase characters, numbers and special characters such as !, #, #, $, _ and %" />
</div>
<div class="row-fluid height60 clearfix">
<label class="desc" id="lbl-password2" for="password2">Re-enter Password<span class="req">*</span></label>
<input type="password" name="password2" id="password2" class="input-medium focused width210" value="" tabindex="17" placeholder="" title="Repeat the password you entered above" />
</div>
<div class="row-fluid clearfix" id="agreement">
<label class="desc">Agreement<span class="req">*</span></label>
<input type="checkbox" checked="checked" tabindex="18" value="I accept ACME INC's Terms and Conditions" class="field checkbox" name="acceptTerms" id="acceptTerms" title="You need to accept our Terms and Conditions before you can place your order.">
<label for="acceptTerms" class="choice">I accept the ACME INC <a target="_new" href="/terms.php">Terms and Conditions</a></label>
</div>
<div class="form-actions form-actions-plus">
<div class="btn-align-right"><button type="submit" class="btn btn-primary" id="bsfSubmit" tabindex="18">Accept Billing Information and Continue</button>
</div>
</div>
<input type="hidden" name="telephone" />
<input type="hidden" name="jsn" />
<input type="hidden" name="ctt" />
</div>
</form>
Really, all I need is another set of eyes to tell me where I might have got it wrong. thanks.
Turns out that removing all the tabindex tags did about 90% of the work. No problems anymore as far as getting from one form element to another.
The culprits were:
1) Other forms on the same page, and me thinking that tabindex is per form instead of per page.
2) Select2 assigns a tabindex of -1 to each select element it replaces. So tabbing to a select2 drop-down, as well as tabbing away from it, can cause random spastic web browser behavior.
Solution for #1: Remove all tabindex tags in all forms.
Solution for #2: Write a piece of JavaScript to make sure select2 elements always receive the focus, when you tab to it from the previous element, and make sure select2 elements always pass on the focus to the next form element.
// COMING FROM THE ELEMENT IMMEDIATELY BEFORE THE SELECT2:
$('#postalCode').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#s2id_country a');
if(input !== undefined){
input.focus();
}
}
});
// THEN FROM THE SELECT2 TO THE NEXT FORM ELEMENT
$('#s2id_country a').on('keydown', function(evt){
if(evt.keyCode === 9){
evt.preventDefault();
var el = $('#emailField');
if(el.length){
el.focus();
}
}
});
Perhaps there is a more elegant solution for this. Come to think of it, there might even be a possibility of writing a function and using jQuery lingo to find the next and previous elements. At any rate, thanks to everyone who has helped me figure this one out.