I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone
Related
I'm typing to disable/avoid the autosuggest on specific field.
The html snippet is this:
<div class="form-group">
<h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
<input type="input" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off">
<span id='remainingC'></span>
<small class="form-text text-muted">You will identify your group of IDs by this name</small>
<div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>
note that I added the autocomplete='off' and yet, the browser still provide a suggestion.
Try to replace input type="input" with type="text"
I am trying to find the advanced search query for HTML to automatically search the results.
For example, a plain google.com query is https://google.com/search, while image search query is https://images.google.com/images
I can't find the query to automatically search the values from 4 text boxes through the Advanced Search engine.
The functionality I am looking for is that when I try searching for keywords from my web page it should go through the advanced search engine:
<form action="https://www.google.com/advanced_search?as_q=q&as_epq=r&as_oq=s&as_eq=t">
I found an alternative to going through the Advanced Search engine.
The Advanced Search has a few parameters that are passed in the URL for a search query:
all these words: the operator passed is as_q like this.
<input class="" type="text" name="as_q">
this exact word or phrase: the operator passed is as_epq
any of these words: the operator passed is as_oq
none of these words: the operator passed is as_eq
So I named the HTML textboxes with the corresponding names and concatenated the above parameters to the search query.
For the first section of the advanced search, try
<form action="https://google.com/search" name="f">
<div class="field">
<label for="field1">all these words:</label>
<input type="text" class="textinput" id="field1" value="" name="as_q">
</div>
<br>
<div class="field">
<label for="field2">this exact word or phrase: </label>
<input type="text" class="textinput" id="field2" value="" name="as_epq">
</div>
<br>
<div class="field">
<label for="field3">any of this words: </label>
<input type="text" class="textinput" id="field3" value="" name="as_oq">
</div>
<br>
<div class="field">
<label for="field4">none of these words: </label>
<input type="text" class="textinput" id="field4" value="" name="as_eq">
</div>
<br>
<div class="field">
<label for="field5">numbers ranging from: </label>
<input type="text" class="textinput1" id="field5" value="" name="as_nlo">
<span class="seperator">to</span>
<input type="text" class="textinput2" id="field5" value="" name="as_nhi">
</div>
<input type="submit" value="advanced search">
</form>
If you are trying to create HTML page, I would like to share this code.
You can add a space for a right indentation using & nbsp;.
Here is an example:
<form action="https://google.com/search">
All these words:<input type="text" name="as_q" >
<br><br>Exact word/phrase:<input type="text" name="as_epq" >
<br><br>Any of these words:<input type="text" name="as_oq" >
<br><br>None of these words:<input type="text" name="as_eq" >
<br><br> <input type="submit" value="advanced search">
</form>
I have a form:
<form action="/index.html" method="POST" id="form">
<div id="namediv">
Full Name:
<input type="text" pattern="[A-Z][a-z]+ [A-Z][a-z]+"/ id="name" required/></div>
<div>
Date:
<input type="date"/>
</div>
<div id="emaildiv">
Email:
<input type="email" id="email" onblur="validateEmail()" required/><br>
<emailerror class="invisible">Incorrect email address!</emailerror>
</div>
<div id="urldiv">
Favorite webpage:
<input type="url" name="favurl"id="url" onblur="validateFavURL()" required/><br>
<urlerror class="invisible">Incorrect webpage!</urlerror>
</div>
<div>
<input type="button" value="Validate" onclick="validateAll()"/>
</div>
</form>
How can I trigger the name's pattern validity without submitting the form? I tried checkValidity() but didn't succeed. What is the exact syntax for it?
Not sure that I clearly understand the question. But the problem appears to be invalid regex. But the field does say "full name" so you'd likely need to allow a space as well.
<div>
<label>This field accepts upper and lowercase letters only</label>
</div>
<input type="text" pattern="[A-Z][a-z]+" id="name" required/>
I wanted to try and verify input before being submitted therefore I used the required attribute at the end of input, but it's not working and I've already tried some of the recommended solution like wrapping the input in form tag or trying to close the tag of input () but when i submit my form with an empty input it stills submited normally and doesn't declare a required field .
I would appreciate any help, thank you!!
this is a part of my code
<form id="form" style="background-color:honeydew ;" class="container text-center">
<div><br><h2> Contact Us </h2></div>
<div id="contact">
<div>
<label> Name</label>
<input type="text" placeholder="Your name " name="name" required/>
</div>
<br>
<div>
<label> Email</label>
<input type="email" placeholder="name#gmail.com" name="email" name="email">
</div>
<br>
<div>
<label> Message</label>
<input type="text" style="height:50px;" name="message">
</div>
<br>
<div><input type="button" value="submit" name="submit"><br></div>
<br>
</div>
<br>
</form>
and this is the javascript file linked to it :
//we take informations subbmitted by user from the form and we replace the form with a reply
//containing these pieces of information on the click on the submit button
var form=document.getElementById('form'),
contactForm=document.getElementById('contact'),
submitButton=contactForm.children[6].children[0];
var processForm= function(){
name=document.getElementsByName('name')[0].value,
email=document.getElementsByName('email')[0].value,
sitereplyText=document.createTextNode('this is a initialiazing value'),
sitereplyEl=document.createElement('p');
mytext= 'Hey '+name+'! Thanks for your message :) We will email you back at '+email;
sitereplyText.nodeValue=mytext;
sitereplyEl.appendChild(sitereplyText);
form.replaceChild(sitereplyEl,contactForm);
}
submitButton.addEventListener('click',processForm);
So i firstly corrected the input type into submit
<input type="submit" value="submit" name="submit">
then in the javascript file i changed
submitButton.addEventListener('click',processForm);
to
submitButton.addEventListener('form.submit()',processForm);
and it seems to work :)
We have built a site with a login page - login page is a simple form in field sets - annoyingly when using an iPad the keyboard is triggered whenever pressing the button - it stays active as the next page is loaded - i can understand why - following is the form code - is there any way to disable this functionality?
<section>
<h3>Login</h3>
<form method="post" action="/Login" novalidate="novalidate" _lpchecked="1"> <fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_UserName">User Name</label>
<input type="text" value="" name="FormModel.UserName" id="FormModel_UserName" data-val-required="Please provide your User Name" data-val="true" aria-required="true" aria-describedby="FormModel_UserName-error" class="input-validation-error" aria-invalid="true">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.UserName" class="field-validation-error"><span id="FormModel_UserName-error" class="">Please provide your User Name</span></span>
<img alt="Icon: Person" src="/css/img/icons/icon-user.svg">
</label>
</fieldset>
<fieldset>
<label class="ui-front legend icon-img-inside">
<label for="FormModel_Password">Password</label>
<input type="password" name="FormModel.Password" id="FormModel_Password" data-val-required="Please provide your Password" data-val="true" aria-required="true" class="input-validation-error" aria-describedby="FormModel_Password-error">
<span data-valmsg-replace="true" data-valmsg-for="FormModel.Password" class="field-validation-error"><span id="FormModel_Password-error" class="">Please provide your Password</span></span>
<img alt="Icon: Pencil" src="/css/img/icons/icon-pencil.svg">
</label>
</fieldset>
<div data-valmsg-summary="true" class="validation-summary-errors"><ul> <li>Please provide your User Name</li><li>Please provide your Password</li> </ul></div> <fieldset>
<button class="button" name="submit" type="submit">
<i class="key"></i>
<span>Login</span>
</button>
</fieldset>
<!-- Javascript detection -->
<span class="result-login" id="result"></span>
You could try to disable native, default submit process and do submiting with js,, something like this:
document.getElementsByClassName('button')[0].onclick = function(e){
e.preventDefault();
document.getElementById('frm1').submit();
}
see the code here, I changed some tag names, look the html pane also..: http://codepen.io/mkdizajn/pen/EgmPQR?editors=1010
I can't see this live and test but I hope that helps..