Required field HTML5 form - forms

I just created html 5 form with attribute "required".
Why it still appear popup "Please fill out this field" in left top of my browser(Firefox), not under the field when it submitted although all field filled.
here my code :
<form method="get" id="form_reg_mem">
<input type="hidden" name="s" value="member"/>
<input type="hidden" name="a" value="4"/>
<h5>member Informatio</h5>
<hr/><br/>
<p>
<label>Email</label>
<input id="mem_email" class="easyui-validatebox filter_email" type="email" name="mem_email" required style="width: 200px" maxlength="45" />
</p>
<p>
<label>First Name</label>
<input id="mem_fname" class="easyui-validatebox filter_alphanumeric" type="text" name="mem_fname" required style="width: 200px" maxlength="45"/>
</p>
<p>
<label>Last Name</label>
<input id="mem_lname" class="easyui-validatebox filter_alphanumeric" type="text" name="mem_lname" required style="width: 200px" maxlength="45" />
</p>
<p>
<label>Address</label>
<textarea id="mem_addr" class="easyui-validatebox filter_alphanumeric" name="mem_addr" style="width: 400px" maxlength="128"></textarea>
</p>
<p>
<label>Phone</label>
<input id="mem_phone" class="easyui-validatebox filter_numeric" type="text" name="mem_phone" style="width: 150px" maxlength="32" required/>
<p>
<label>Member Class</label>
<input id="mem_class" name="mem_class" url="/mobmarket/json/class.json" valueField="id" textField="text">
</input>
</p>
<p>
<input class="button" value="Register" type="submit"/>
</p>
</form>
Thx

Finally i know what my trouble.
It because i use the "easy ui combo box element" as a required field
Dont add required attribut if you use it
You must use this code to make it required
$("some selector").combobox({
required:true
});

The attribute should be
required="required"

The answer provided by mbuurman is correct. Adding required="required" atribute to the input and select tags it worked ok for me. Tested on Chrome (30.0) and Firefox (24.0).

Related

Get iPhone Go Button to Submit Form

I have a mailing list sign up form on my website, and the button that fires it has got <input type="submit" . However, when I visit my website on my iPhone, the go button does not do anything. How do I fix this? Here is my full code:
<div id="mc_embed_signup">
<form action="//isaacadni.us10.list-manage.com/subscribe/post?u=0db50d6b1ce1ac34d3194a969&id=0026019372" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="form-group">
<input type="email" value="" name="EMAIL" class="email form-control input-lg" id="mce-EMAIL" placeholder="email address" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_0db50d6b1ce1ac34d3194a969_0026019372" tabindex="-1" value=""></div>
<br>
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" btnSubmitclass="btn btn-primary btn-lg">
</div>
</form>
</div>
Remove target="_blank" from the <form> element.
You can force it by replacing your input line with this,
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" onclick="document.getElementById('mce-EMAIL').submit()" btnSubmitclass="btn btn-primary btn-lg">

jQuery mobile form submit without triggering page Naviagion

How can I navigate to a new page without triggering the jQuery mobile form handling, which creates a ajax request and then loads the page with it's speczial funcationallity (I don't know the name for it)
Add this attribute to the form:
data-ajax="false"
Example:
<form action="demo.php" method="post" id="check-user" class="ui-body ui-body-a ui-corner-all" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<div data-role="fieldcontain">
<label for="password">Enter your password:</label>
<input type="password" value="" name="password" id="password"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit">
</fieldset>
</form>

I cant get my mailto contact form to work

I have tried to make a contact form in a modal window. I thought I had done everything correctly but when I click send, I don't receive the email. Can anybody please show me where I'm going wrong?
Thanks very much in advance. Merry Xmas!
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Contact McGregor Beauty</h3>
</div>
<div class="modal-body">
<form id="contact" method="post" action="mailto:aka_pipsqueak#msn.com">
Your Name <input class="input-xlarge" type="text" placeholder="Please write your name here" required>
<br />
Your Email <input class="input-xlarge" type="email" placeholder="Please enter your email address here" required><br />
Phone(Optional) <input class="input-large" type="number" placeholder="Add a telephone number"><hr />
<label><strong>Treatments of Interest</strong></label>
<label class="checkbox">
<input type="checkbox" value="Waxing & Tinting">Waxing & Tinting
</label>
<label class="checkbox">
<input type="checkbox" value="Massage">Massage
</label>
<label class="checkbox">
<input type="checkbox" value="Reflexology">Reflexology
</label>
<label class="checkbox">
<input type="checkbox" value="Manicure/Pedicure">Manicure & Pedicure
</label>
<label class="checkbox">
<input type="checkbox" value="MLD">MLD
</label>
<br />
<label><strong>Your Questions/Comments</strong></label>
<textarea rows="2" style="width:500px" type="text" required></textarea>
<div class="modal-footer">
<button class="btn btn-primary" type="submit" data-dismiss="modal" aria-hidden="true">Send</button>
</div>
</form>
what mail server are you using?
where is the server side code used to handle the http request of the form?
Just having a form in html isn't going to do anything, and an action of mailto: is not correct, nor would you want to do this because this email address can be seen in the markup and will be spammed until you close it.
what programming language are you planning to use?
Here's a basic example you can follow using php:
http://www.w3schools.com/php/php_mail.asp

html / iphone - getting a form alert when attempting to refresh the page

I'm building a site which has a form but for some reason, even if a user doesn't enter info into the form (even if the form hasn't been presented yet - it starts out hidden) - if I refresh the page, iOS gives me a browser alert stating:
are you sure you want to submit this form again?
Any idea why this happens or how to suppress that?
This is my form code:
<div id="vehicle_form">
<form method="post" name="emailForm">
<input class="dField" id="dfEmail" type="email" name="email" value="Email"/><br/>
<input class="dField" id="dfName" type="text" name="firstname" value="First Name"/><br/>
<input class="dField" id="dfLast" type="text" name="lastname" value="Last Name"/><br/>
<input class="dField" id="dfZip" type="text" maxlength="5" name="zip" value="Zip Code"/><br/>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>
<div id="dErrors"></div>
</div>
I also have this javascript acting on the form fields:
$j('.dField').focus(function(){
clearInput($j(this)[0]); //The [0] seems to be necessary to retrieve the element at the DOM object level
}).blur(function(){
restoreInput($j(this)[0]);
});
as well as some other form related javascript.
Not sure if this is exactly what you're looking for, but try this:
<form method="post" name="emailForm">
<input type="text" name="email" value="Email" size="30" onfocus="value=''"><br>
<input type="text" name="firstname" value="First Name" size="30" onfocus="value=''"><br>
<input type="text" name="lastname" value="Last Name" size="30" onfocus="value=''"><br>
<input type="text" name="zipcode" value="Zip Code" size="30" onfocus="value=''"><br>
<button id="dFormBack">Back</button><button type="submit" id="dSubmit">Submit</button>
</form>

SiteMinder SSO Custom Login page

Has anyone got a bare bones custom login page, that will post to the default login.fcc. I'm unsure where to start with this. Presumably it would have javascript code to take a part the query string and then pass it on to the login.fcc
Custom login pages are simple- all you have to do is post with the correct variables to the FCC. This snippet is from login.fcc, so in this case the web agent fills in the $$ variables automatically, and then posts to itself. If you are going submit the variables from another source (non fcc) then you will have to make sure to include the agent name, username, password, and target in your post.
<form action="login.fcc" method="post">
<div class="formRow">
<table>
<tr>
<td><P><span>Username :</span></P></td>
<td><P><input name="username" type="text" value=""
style="width:150px" /></P></td>
</tr>
<tr>
<td><P><span>Password :</span></P></td>
<td><P><input name="password" type="password" value=""
style="width:150px" /></P></td>
</tr>
</table>
</div>
<INPUT TYPE=HIDDEN NAME="SMENC" VALUE="ISO-8859-1">
<INPUT type=HIDDEN name="SMLOCALE" value="US-EN">
<INPUT type=HIDDEN name="SMRETRIES" value="1">
<input type=hidden name=target value="$$target$$">
<input type=hidden name=smquerydata value="$$smquerydata$$">
<input type=hidden name=smauthreason value="$$smauthreason$$">
<input type=hidden name=smagentname value="$$smagentname$$">
<input type=hidden name=postpreservationdata value="$$postpreservationdata$$">
<div class="formRow">
<P><input name="submit" type="submit" value="Login" />
<input name="Reset" type="reset" /></P>
</div>
</form>
Based on whether the secureurls feature is enabled or not the paramater that is required to be passed/posted to login.fcc would change.
Here is the summary of the data that is required to be posted to Login.fcc
When SecureURLs=No
The post form data contains following :
Required:
target
smagentname
Optional:
smenc
smlocale
smquerydata
postpreservationdata
smauthreason
Post URL : /siteminderagent/forms/login.fcc
When SecureURLs=YES
The post form data contains following :
Required:
smquerydata
Optional:
smenc
smlocale
target
smauthreason
postpreservationdata
smagentname
Post URL : /siteminderagent/forms/login.fcc?SMQUERYDATA=******
Please refer : https://iamtechtips.com/custom-login-page/
<html>
<body>
<form action="/verify.fcc" method="post">
<div class="formRow">
<table>
<tr>
<td><P><span>Username :</span></P></td>
<td><P><input name="USER" type="text" value="" style="width:150px" /></P></td>
</tr>
<tr>
<td><P><span>Password :</span></P></td>
<td><P><input name="PASSWORD" type="password" value="" style="width:150px" /></P></td>
</tr>
</table>
</div>
<INPUT TYPE=HIDDEN NAME="SMENC" VALUE="ISO-8859-1">
<INPUT type=HIDDEN name="SMLOCALE" value="US-EN">
<INPUT type=HIDDEN name="SMRETRIES" value="1">
<input type=hidden name=target value="/protected.html">
<div class="formRow">
<P>
<input name="submit" type="submit" value="Login" />
<input name="Reset" type="reset" />
</P>
</div>
</form>
</body>
</html>