Html 5 required field validator is not showing validation message - html

I am having a simple html form with the required validator set to one of its input field, but I do not get the validation message
Can you please help where am I going wrong??
<form id="newrentalform">
<div class="form-group">
<label>Customer</label>
<div class="tt-container">
<input id="customer" type="text" class="form-control" required>
</div>
</div>
<div class="form-group">
<label>Movie</label>
<div class="tt-container">
<input id="movie" type="text" value="" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-4">
<ul id="movies" class="list-group"></ul>
</div>
</div>
<button class="btn btn-primary">Submit</button>
</form>

Related

Required attributes for input not working on form submit

I wrote this simple form that should require the users to input their phone number if the submit button is hit. Instead, nothing happens. Can someone please help me?
Here is the code for my form:
<form id="subscribeForm" method="POST" novalidate="novalidate">
<div class="payment margin-top-30">
<div class="payment-tab payment-tab-active">
<div class="payment-tab-trigger">
<input checked id="{PAYMENT_TYPES.folder}"
class="payment_method_id" name="payment_method_id"
type="radio"
value="{PAYMENT_TYPES.id}" data-name="m-pesa2">
<label for="{PAYMENT_TYPES.folder}">{PAYMENT_TYPES.title}</label>
<img class="payment-logo {PAYMENT_TYPES.folder}"
src="{SITE_URL}includes/payments/{PAYMENT_TYPES.folder}/logo/logo.png"
alt="{PAYMENT_TYPES.title}">
</div>
<div class="payment-tab-content">
<p>
A Push notification shall be sent to the Phone
Number to complete payment.
</p>
<div class="payment-tab-content">
<div class="row payment-form-row">
<div class="col-12">
<div class="card-label form-group">
<input type="text" class="form-control"
name="phone" placeholder="Phone Number" required/>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="Submit" class="button big ripple-effect
margin-top-40 margin-bottom-65 subscribeNow"
id="subscribeNow">submit</button>
</form>
Remove novalidate="novalidate" from <form>

form not submitting on localhost or remote

After submitting the form nothing happens, page doesn't reloads. Out of ideas.
<form action="/departmentinsert.php" method="POST" class="contact-form">
<div class="col-md-12">
<div class="row">
<div class="form-group">
<input class="form-control" id="name" name="name" placeholder="Отделение" type="text">
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</form>
to submit the form you will need to use <input type="submit"> instead of the <button> tag
once you update the code I am sure it will work, if you are using PHP it should be like this
<?php
if(isset($_POST['submit']){
// your code
}
?>
if this doesn't work please post your PHP as well so i can check where's the problem
hope this help.
I changed formatting to and it works now. My code now is
<form action="" method="POST" >
<div class="form-group">
<input class="form-group" id="name" name="name" placeholder="Отделение" type="text">
</div>
<div class="form-group">
<input class="form-group" id="title" name="title" placeholder="Заголовок" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="breadcrumb" name="breadcrumb" placeholder="Хлебные крошки" type="text" size="255">
</div>
<div class="form-group">
<input class="form-group" id="pagetitle" name="pagetitle" placeholder="Титул страницы" type="text" size="255">
</div>
<div class="form-group">
Опубликовать?
<input name="active" type="checkbox" value="1" checked>
</div>
<div class="form-group">
<button type="submit" name="submit" id="submit">
Добавить <i class="fa fa-paper-plane"></i>
</button>
</div>
</form>

How to perform validations in angular2

I am trying to perform validations to my fileds in such a way that when i click on submit button it must show error to fields which are empty.Can anyone please help me .............
<div *ngFor="let detail of details" class="nopadding col-sm-12">
<form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" class="nobottommargin col-sm-12 formpaddingcss" name="template-contactform" novalidate="novalidate">
<div class="form-process"></div>
<div class="col_half">
<label for="template-contactform-name">First Name <small>*</small></label>
<div class="input-group divcenter">
<span class="input-group-addon noradius"><i class="icon-user iconcolorcss"></i></span>
<input type="email" data-toggle="tooltip" data-placement="top" title="Enter Firstname!" name="widget-subscribe-form-email" class="form-control required email formcontrolheight" [formControl]="form.controls['firstname']" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
</div>
</div>
<div class="clear"></div>
<div class="col_full">
<button class="button button-blue button-mini bottommargin-sm pull-right text-right" type="submit">Save</button>
</div>
<div class="clear"></div>
</div>
Try this for simple validations....
<input type="email" title="Enter Firstname!" class="form-control required email formcontrolheight" [(ngModel)]="detail.firstname" placeholder="First Name" aria-required="true">
<span *ngIf="clicked && !detail.firstname || !detail.firstname.trim()" class="error">Error Its empty</span>
<button (click)="clicked = true"></button>
I don't its correct or not but this works fine with me. Refer this code:
<form id="discussion_form" name="discussion_form" ng-submit="addDiscussion(discussion_form.$valid)" novalidate>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="dis_title">Topic<span>*</span></label>
<input type="text" id="dis_title" class="form-control" name="dis_title" placeholder="e.g., about independence day celebration." required ng-model="discussionDetails.dis_title">
<label for="dis_title" class="form_errors" ng-show="discussion_form.dis_title.$invalid && !discussion_form.dis_title.$pristine">Please enter a discussion topic</label><!--To show error msg-->
</div>
</div>
</div>
<button type="submit" class="btn btn-primary pull-right" ng-disabled="discussion_form.$invalid">Submit</button>

Form Code Missing Something?

First time posting here on Stackoverflow, can you guys tell me what's missing with this code? It's supposed to be a form but the "Submit" button does nothing. Thanks!
<div class="container">
<span class="reg"> <h1>Register Now</h1> </span>
<div class="row">
<div class="conent-part">
<div class="form-body">
<div class="fome-body">
<form>
<div class="row">
<div class="form-part">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Your Email Address">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Email">
</div>
</div>
<div class="form-part">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Nominee's Sport">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" placeholder="Accomplishments"></textarea>
</div>
</div>
</div>
<div class="custom_btn">
<button type="button" class="btn btn-primary btn2">Submit</button>
</div>
</form>
Change
<div class="custom_btn">
<button type="button" class="btn btn-primary btn2">Submit</button>
</div>
To
<div class="custom_btn">
<button type="submit" class="btn btn-primary btn2">Submit</button>
</div>
By just typing type=button you're just telling us that its a button without stating a function for it.The type="submit" will automatically submit the form to the specified URL.
<button type="button">
has no default behaviour, if you want to submit the form you'd just use <button> without the type attribute defined (submit is the default value).
See the docs for more info.

form submitting not refresing value if get out the button

I have a form, that I need my save button to be outside of form elements, but if I take it out elsewhere, it doesn`t like refresh the form.
<form ng-submit="save()" action="" name="addInv" novalidate>
<div class="col-md-10">
<label>Name:</label>
<input type="text" ng-model="newlocation.name" class="form-control">
</div>
<div class="col-md-10">
<label>Storage administrator:</label>
<select ng-model="newlocation.administrator" class="form-control" ng-options="user.resource_uri as user.first_name for user in users"></select>
</div>
<div class="col-md-6">
<label>Street:</label>
<input type="text" ng-model="newlocation.street" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>City:</label>
<input type="text" ng-model="newlocation.city" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Country:</label>
<input type="text" ng-model="newlocation.country" class="input-medium form-control">
</div>
<div class="col-md-6">
<label>Postal code:</label>
<input type="text" ng-model="newlocation.postalCode" class="input-medium form-control">
</div>
<div class="col-md-6">
<button class="btn tbn-lg btn-primary">Save</button>
</div>
</form>
If I put button outside the <form> form doesn't refresh values.
You could use JavaScript to do this
<input type="submit" onclick="document.forms[0].submit();" />