how to validate the pattern in form submit - html

At the time of given the input in edittext field it show error if anyone will put incorrent IP Address format of IP adsress should be like these 000.000.0.000 plz help me out
IN HTML5:-
<div data-role="content">
<form id="form">
<div data-role="fieldcontain">
<label for="ip">IP Address/System Name</label>
<input name="ip" id="ip" type="text" pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$">
</div>
<div style="text-align:center;">
<div data-role="button" data-theme="b" data-inline="true" id="button1">Update</div>
</div>
</div>

For HTML5 validation to work on submit, You have to put required attribute in your input fields, you want to validate using HTML5 and you have to submit the form.
You can handle the form data submitted through javascript, and incase you do want to handle the submitted data manually then you have to specify data-ajax="false" in you form tag
For your code, try this
<div data-role="content">
<form id="form" data-ajax="false">
<div data-role="fieldcontain">
<label for="ip">IP Address/System Name</label>
<input name="ip" id="ip" type="text" required pattern="((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){4}$">
</div>
<div style="text-align:center;">
<input type="submit" value="Submit button" />
</div>
</form>
</div>
And in javascript you can do something like
$("#form").submit(function(e){
e.preventDefault();
//call your method
});

One route you can go uses mask.js - In your case you can have it force the user to input their data in the proper format, pre-populate the '.' characters in the IP, and stop the user from entering non-numeric values.
Mask.js
And here is a fiddle - http://jsfiddle.net/QF9Lz/2/
click in the textbox, you'll see a formatting mask appear and you will only be able to enter numeric values in the format you specified.
So, once you include mask.js in the head, you can initialize the input mask like this:
$(document).ready( function() {
$('#ip').mask('999.999.9.999');
});

I made this regex for address/mask
For example: 10.0.0.0/8
((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){3}\/([1-2][0-9]|[0-9]|3[0-2])$
if you want just the regex of address use:
((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))((^|\.)((25[0-5])|(2[0-4]\d)|(1\d\d)|([1-9]?\d))){3}$

Related

HTML tag form without "action" attribute

I'm using this HTML code in an HTML page:
<form method="post">
<div class="form-group">
<input type="text" class="form-control" name="username">
</div>
<div class="form-group">
<input type="password" class="form-control" name="password">
</div>
<input type="hidden" name="ref" value="post-ad.php"/>
<button type="submit" name="submit" id="submit" class="btn">S'identifier</button>
</form>
On clicking submit button which action will this form execute? I noticed that it execute the value of input named "ref" in this example "post-ad.php" or "index.php" or "dashboard.php". Is it normal?! As I know the action attribute is mandatory?
without action attribute it will POST/GET to the same page
see here
If I understood right you're asking about action attribute that goes inside <form>.
If you put nothing there, it'll send the POST to the same page it is right now. If that form is in "index.php" it'll send all <form> data to "index.php"
You call form without action with this code:
<form action="javascript:void(0);"></form>

AngularJS form validation "required" not working

I am having problem with angular validation.
this one does'nt work...
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="text1.$error.required">Please enter something!</span>
but this works:
<form name="myform">
<input type="text" ng-model="text1" name="text1" required>
<span ng-show="myform.text1.$error.required">Please enter something!</span>
</form>
is it possible to somehow correct the first one without placing it inside a form?
thanks
You can use the "ng-form" directive if you really dont want to add a form tag.
<body ng-controller="MainCtrl">
<div ng-form="myForm">
<input type="text" required ng-model="user.name" placeholder="Username">
<button ng-click="doSomething()" ng-disabled="myForm.$invalid">DO</button>
</div>
</body>
example
As far as I know, no, it is not possible. The FormController is what handles the states of each form element, so you need a reference to it in order to check the validation state.

How to make HTML validation work with onclick="form.submit()" instead of a type="submit" button/input

I have a form with the following code:
<form name="form" method="post" action="https://pilot.datatrans.biz/upp/jsp/getCcAliasFormMod.jsp" id="form_payment_cc" name="uppform">
<label for"cvv">CVV</label><br />
<input type="text" size="4" id="cvv" name="cvv" value="" required="required" />
<p></p>
<div class="order">
<div></div> <div><img src="/images/pfeil_orange.png" style="margin-left: 30px;"><strong>Weiter</strong></div>
</div>
<input type="hidden" id="form__token" name="form[_token]" value="LaBK9OAZyhjENzWmCiCokS0kGXgFmbPNm7v1lo1LuRs" />
</form>
The form contains elements with the required="required" attribute. Unfortunately, for design reasons, I cannot use <input type="submit" /> to submit a form. Instead, I use <a onclick="form.submit()"></a>. HTML validation does not work when I try to submit this way.
Any ideas as to why? Are there ways to trigger HTML validation without using a submit button (I know that everything works when I use a regular submit button)?
You can try <a onclick="if(form.checkValidity()) form.submit()"></a>
Though it might be better to use CSS to apply your custom design and use native buttons.
Update:
It seems a regular button is required to trigger native validation. So a possible solution would be to use a hidden button and trigger a click using JS:
<form>
<input name="email" type="email" title="Enter your email" required />
<input id="sumbitBtn" type="submit" style="position: absolute; left: -9999px" />
Submit
</form>
For a CSS based solution (no JS required) using a regular button check this fiddle
If you want to display the native error messages that some browsers have (such as Chrome), unfortunately the only way to do that is by submitting the form, like this:
<form id="myform" action="" method="POST">
submit
</form>
and then:
window.onload = function() {
document.getElementById('mylink').onclick = function() {
document.getElementById('myform').submit();
return false;
};
};

How to get the Form result in div?

Hi i have this html code to submit the data to google
<form name="input" action="http://www.google.com" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<div id="result"></div>
when i type words to search and click submit button,it should go to google.com,it should get the result and that result should be displayed in div..how can i do thar... thanks in advance
You can, with some limitations, have the results of form submissions to be displayed inside the current page (containing the form) by using a target attribute in the form tag. The attribute value should match the value of a name attribute in an iframe element on the page. You can wrap the iframe element inside a div element, of course.
However, this won’t work in the given case. First, the form is not a Google search form. To launch a search, the action attribute should be e.g. http://www.google.fi/search, and the form should contain a field named by Google naming conventions; q is the name for a keywords input item. Second, and more seriously, Google just does not let you do that. In HTTP headers, it says X-Frame-Options SAMEORIGIN, which means that you cannot get the results inside a frame on a page at your site.
You will have to use javascript for this. Also, use the Inner Frame for this. And the code will be something like:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit" onclick="function1">
</form>
<div id="result">
<iframe src="http://www.google.com/" border-style:solid;">
</iframe>
</div>
<script type="text/javascript">
function1(){
var el=document.getElementById("result")
el.innerHTML="<iframe src=\"http://www.google.com\"></iframe>"
}
</script>

.asp postback address in browser

EDITED: Java httpPost into .asp form
I am trying to understand .asp a little
I have this code for the webpage with the login form and a postback action.
Lets assume that the webpage is www.xxx.com/index.asp
<form method="post" id="form1" name="form1" action="">
<div id="login" class="box">
<div class="header">Log in</div>
<div class="content">
<label for="txtUser">User:</label>
<input id="txtUser" name="txtUser" type="text" size="13" value="" />
<label for="txtPassword">Password:</label>
<input id="txtPassword" name="txtPassword" type="password" size="13" value="" />
<input id="BLogin" name="BLogin" type="submit" value="Log in" />
</div>
<div class="footer">
<input type="checkbox" id="chkSave" name="chkSave" /> <label for="chkSave">Save account</label>
</div>
</div>
</form>
So as i understand, if I want to fill the fields in the browser window, i must call:
www.xxx.com/index.asp?txtUser=boris&txtPassword=boris&BLogin=Log in
But nothing simmilar is ever executed in the browser. What is wrong with me thinking in that way? :)
EDIT: Seems that not all the input fields must be filled in before doing POST. Probably this depends on the server, when logging in, if service requires for example 'rememmber me' field every time, then it probably must be filled in.
The form method is "POST", which means that the form data is sent in a special data block within the HTTP request, not as part of the URL. If you change the method to "GET" the data will be encoded in the query string.
More information: http://www.cs.tut.fi/~jkorpela/forms/methods.html