react CSS form validation - css

While making a form on react I downloaded some libraries and copied some example I ultimately went with one I made my self but now my entire project has this validation that will stay no matter what I put in the project. Every time I click a button I get a tooltip and I have no idea how to control it.
Here is my code
import React, { useEffect } from 'react';
import axios from 'axios'
const FormRequest = () => {
const formSubmitHandler = () => {
console.log()
}
return (
<div >
<div >
<div >
<div>
<div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div >
<div >
<div >
<span>CONTACT</span>
<span>US</span>
</div>
</div>
<div >
<form onSubmit={(formSubmitHandler)}>
<div >
<input
placeholder="NAME"
name="name"
onChange={''} value={''} required />
</div>
<div >
<input
type="email"
onChange={''} value={''}
placeholder="EMAIL"
name="email"
required />
</div>
<div >
<input
placeholder="CONTACT NO"
name="contact"
onChange={''} value={''}
/>
</div>
<div >
<select
placeholder="REASON"
name="reasonForContact"
onChange={''} value={'onForContact'}
defaultValue="">
<option disabled={true} value="">Reason for Contact</option>
<option value="">apple</option>
<option value="">coconut</option>
<option selected value="coconut">cocnutn</option>
<option value="mango">Mango</option>
</select>
</div>
<div app-form-group >
<input placeholder="MESSAGE"
name="message"
onChange={''} value={''} required
/>
</div>
<div >
<div >
<input
type="checkbox"
checked={ ''}
onChange={''} value={''}
name="acceptTerms"
required />
<p> Do you agree to us saving your details for future us?</p>
</div>
</div>
<div >
<button >CANCEL</button>
<button >SEND</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>)
};
export default FormRequest;
Here is the output

Remove the "required" keyword from your input fields

The required attribute is the HTML attribute, to have the form validation for inputs like phone number, email and so on. You should know about this.

Related

Why after redirection the page style is off with a huge white space

I am currently debugging an issue on a login page after resetting user's password. The login page's style is off after user resets their password successfully and clicks the 'change password' button to redirect to the main login page.
The first code section is for my typescript code which will redirect to my local host, for example localhost:44332/login, login page. And the first html code is for my resetting password code, while the second html code is for my main login page.
resetPassword() {
if (this.isPermittedToUpdate) {
if (this.passwordForm.dirty && this.passwordForm.valid) {
this.spinnerService.show();
const newPassword = this.passwordForm.get('newPwd').value;
this.userService.ResetPassword(newPassword, this.urlIdentifier).subscribe(result => {
if (result.retCode === APIReturnEnum.Successful) {
this.toastrService.success('Password has been updated');
this.router.navigateByUrl('/login');
}
<div class="row" style="padding-left:2%;padding-bottom: 1%">
<h1>
Reset Password
</h1>
<hr />
</div>
<div *ngIf="isPermittedToUpdate">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="dashboard_graph x_panel">
<div class="x_content" style="margin-top:0 !important; padding: 0px !important">
<form [formGroup]="passwordForm" class="form-horizontal" role="form" style="margin-top:2%"
(ngSubmit)="resetPassword()">
<div class="form-group">
<label class="control-label col-sm-1" style="width:150px">New Password</label>
<div class="col-sm-6">
<input class="form-control" type="password" formControlName="newPwd" name="newPwd"
placeholder="Enter your new password here" style="width:80%" />
<app-validationmessage [control]="passwordForm.controls.newPwd"></app-validationmessage>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-1" style="width:150px">Confirm New Password</label>
<div class="col-sm-6">
<input class="form-control" type="password" formControlName="confirmNewPwd" name="confirmNewPwd"
placeholder="Confirm your new Password here" style="width:80%" />
<app-validationmessage [control]="passwordForm.controls.confirmNewPwd"></app-validationmessage>
</div>
</div>
<button type="submit" class="btn btn-default" style="margin-left:150px; margin-top: 20px;"
[disabled]="!isPermittedToUpdate">Change Password
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="login1">
<div class="login_wrapper">
<section class="login_content">
<div class="login-container-wrapper">
<ng-container *ngIf="!isPasswordReset; else forgotPassword">
<h1 class="welcome">Welcome, please login</h1>
<form class="form-horizontal login-form" [formGroup]="signForm"
(submit)="submit(email.value, password.value)">
<div class="form-group-login">
<div class="relative">
<label for="email">Email</label>
<input type="text" id="email" formControlName="email" class="form-control" placeholder="Email" #email
style="background-color:#fff !important;" />
<i class="fa fa-user fa-2x"></i>
</div>
<app-validationmessage class="form-error" [control]="signForm.controls.email"></app-validationmessage>
</div>
<div class="form-group-login">
<div class="relative password">
<label for="password">Password</label>
<input type="password" id="password" formControlName="password" class="form-control"
placeholder="Password" #password style="background-color:#fff !important;" />
<i class="fa fa-lock fa-2x"></i>
</div>
<app-validationmessage class="form-error" [control]="signForm.controls.password"></app-validationmessage>
</div>
<div class="form-group-login log">
<button type="submit" class="btn dark-grey">Log in</button>
</div>
<div class="forgot-pwd">
<a (click)="switchView()">Forgot Password?</a>
</div>
</form>
</ng-container>
<ng-template #forgotPassword>
<p>Please enter the email address you registered with Softchoice</p>
<form [formGroup]="confirmEmailForm" (submit)="sendResetPasswordEmail()">
<div class="form-group-login">
<input type="email" class="form-control" formControlName="email" placeholder="">
<app-validationmessage [control]="confirmEmailForm.controls.email"></app-validationmessage>
</div>
<div class="form-group-login">
<button type="submit" class="btn dark-grey">Send</button>
</div>
<div class="forgot-pwd">
<a (click)="goBackToLogin()"> Go back to Login Page</a>
</div>
<div>
</div>
</form>
</ng-template>
</div>
<!--</form>-->
</section>
</div>
</div>

Setting error message to right side of control bootstrap and Angular Js

I am using Angular js, in which i have the below control.
<body class="ng-cloak">
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div class="container form-horizontal" ng-show="createMenu">
<br />
<div class="form-group">
<label for="firstName" class="col-sm-3 control-label">Name<em style="color:red">*</em></label>
<div class="col-sm-4">
<input type="text" maxlength="150" class="form-control" required="" ng-model="nName" id="nName" name="nName" />
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.nName.$error.required">Please enter Name.</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Recipient Group:<em style="color:red">*</em></label>
<div class="input-group col-sm-4" style="padding-left:10px;">
<span class="input-group-addon">
<i class="glyphicon glyphicon-search"></i>
</span>
<input type="text" class="form-control" required="" placeholder="Search the group" ng-model="searchDatalocation" ng-change="searchgroups()" name="searchValue">
</div>
<div class="col-sm-3">
<span class="error" ng-show="submitted == true && mainForm.searchValue.$error.required">Please select a Recipient group.</span>
</div>
</div>
</form>
</div>
</body>
The error message "Please enter Name" appears on right side of the textbox, however, the error message "Please select a Recipient group" appers below the control. I have tried changing the css, but it has not worked. How to set the error message to be shown on right side after the control.
Thanks
Style the .input-group div with display: inline-table; and float:left;
Please also note that there is one missing closing tag </div> for class="container form-horizontal"

Bootstrap Form FIle input

I'm having a problem with my form. The browse button in the file input can't be seen as a whole. Here is the screenshot:
And my code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa fa-image fa-fw"></i> Photo List </h3>
</div>
<div class="panel-body">
<form action="upload-photo.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="file">Upload Photo</label>
<input class="form-control" type="file" id="file" name="files[]" multiple="multiple" accept="image/*" />
<p class="help-block">Example block-level help text here.</p>
</div>
<button type="submit" name="uploadp_btn" class="btn btn-primary">Upload!</button>
</form> <hr />
</div>
</div>
Am I missing something? Thank you.
Add the following CSS to your style sheet:
.form-control{
height: auto;
}
http://www.bootply.com/NMVB2TeaK2
Tested that one in Chrome and Firefox, seems to be working!
I think you need to use class name 'filestyle' instead of 'form-control'
<input class="filestyle" type="file" id="file" name="files[]"
multiple="multiple" accept="image/*" />

Connect a Html page to wordpress and create new table in wordpress database

This is an html page I have created for a registration form is it possible to plugin this to wordpress CMS and to create a new table in the database of wordpress so that i can insert my values to the new table.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="regform.css">
<script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="script/disphid.js"></script>
<title>Untitled Document</title>
</head>
<body >
<div class="maindiv" align="center">
<div class="submaindiv" >
<div id="custdet" class="custdet" >
<p class="txtclass">Customer Details</p>
</div>
<div id="custnamefield" class="custdet">
<div id="custname" class="custdetailslft">
Customer Name:
</div>
<div id="custnametext" class="custdetailsright">
<input type="text" name="custname" class="txtfld" maxlength="200" id="custname1" >
</div>
</div>
<div class="customertype" >
<div class="custtypeleft" >
Customer Type:
</div>
<div class="customertyperight" >
<select class="combo" id="comb" onchange="othcusdisp()" onchange="customer()">
<option value="select01">-Select-</option>
<option value="select1">1</option>
<option value="select2">2</option>
<option value="select3" >Other</option>
</select>
</div>
</div>
<div class="othcomptype" id="othercompid" >
<div class="othcompleft">
Other Company:
</div>
<div class="othcompright">
<input type="text" class="txtfld" maxlength="200" name="othercompany" placeholder="Enter Company" id="othercomp" >
</div>
</div>
<div class="logidiv">
<p class="txtclass">Login Details </p>
</div>
<div class="logindetails">
<div class="logindetailsleft">
Username:
</div>
<div class="logindetailsright">
<input type="text" name="username" maxlength="200" class="txtfld" id="username">
</div>
</div>
<div class="passworddiv">
<div class="passwordleft">
Password:
</div>
<div class="passwordright">
<input type="password" name="password" maxlength="10" class="txtfld" placeholder="Password" id="pass" >
</div>
</div>
<div class="repassword">
<div class="repasswordleft">
Confirm Password:
</div>
<div class="repasswordright">
<input type="password" name="confrmpass" maxlength="10" class="txtfld" id="confirmpass" >
</div>
</div>
<div class="custaddressdiv">
<p class="txtclass">Customer Address</p>
</div>
<div class="custaddress">
<div class="custaddressleft">
Address:
</div>
<div class="custaddressright">
<input type="text" name="address" maxlength="200" class="txtfld" id="custaddress1" >
</div>
</div>
<div class="placediv">
<div class="placedivleft">
Place:
</div>
<div class="placedivright">
<select class="combo " id="place" onchange="othplace()">
<option value="select">-Select-</option>
<option value="select1">Aluva</option>
<option value="select2">Athani</option>
<option value="select3">Other</option>
</select>
</div>
</div>
<div class="placediv" id="placedivright">
<div class="placedivleft">
</div>
<div class="placedivright" >
<input type="text" name="district " maxlength="200" class="txtfld" placeholder="Enter Place">
</div>
</div>
<div class="placediv">
<div class="placedivleft">
District:
</div>
<div class="placedivright">
<input type="text" name="district " maxlength="200" class="txtfld" id="district">
</div>
</div>
<div class="placediv">
<div class="placedivleft">
State:
</div>
<div class="placedivright">
<input type="text" name="state" maxlength="200" class="txtfld" id="state">
</div>
</div>
<div class="placediv">
<div class="placedivleft">
Nation:
</div>
<div class="placedivright">
<select class="combo " id="nation">
<option value="select">-Select-</option>
<option value="select1">India</option>
<option value="select2">USA</option>
<option value="select3">Canada</option>
</select>
</div>
</div>
<div class="custdet">
<p class="txtclass">Contact Details
</div>
<div class="passworddiv">
<div class="passwordleft">
Contact Number:
</div>
<div class="passwordright">
<input type="text" name="contactnum" maxlength="11" class="txtfld" id="phonenum1" >
</div>
</div>
<div class="repassword">
<div class="repasswordleft">
Email Id:
</div>
<div class="repasswordright">
<input type="text" name="email" maxlength="200" class="txtfld" id="email">
</div>
</div>
<div class="repassword">
<div class="repasswordleft">
Web Address:
</div>
<div class="repasswordright">
<input type="text" name="webid" maxlength="200" class="txtfld" id="webid">
</div>
</div>
<div class="save">
<div class="savebutton">
<input type="button" name="button" value="Save" onclick="regval()" >
</div>
</div>
</div>
</div>
</body>
</html>
This is the html code for a registration form i have created.I need to plugin it to word press CMS.And i also need to create a new table in the database of word press so that i can insert all the fields to data base.
You'll need to have a dynamic .php file and load wp-load.php from WordPress in order to have access to all its functions.
require_once( '/path-to-wp/wp-load.php' );
obviously, adjust the path-to-wp part. After that, just use the WordPress classes and functions http://codex.wordpress.org/Class_Reference/wpdb

CSS form with side by side fields...how to align the labels and fields vertically?

completely frustrated here with something that is probably so simple. I have a form and want the Zip and Zip+4 fields to be on the same line. For some reason nothing is lining up the way I've done it. I've spent the last 6 hours searching the web and trying various things (this latest was from this site) and nothing works. Can someone help me please? Thanks!
Here is my code:
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
Would this do the job for you? Please test it on multiple browsers
because it's only tested on FF 3.6, IE 7+
While the structure police are sure to pull me over for this, it is my considered opinion that using a table is the single most reliable way to line up elements in all browsers. Set the vertical-align:top and do what you need to do.
You can do something along this lines:
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
label {
width: 300px !important;/* added important to override your inline styles*/
display: block !important;
text-align: right !important;
float: left;
}
</style>
</head>
<body>
<form>
<div style="float:left;">
<label for "StrAddress">Street Address *</label>
<input name="StrAddress" type="text" style="width:200px" id="StrAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrSecondaryAddress">Suite, P.O. Box, Apt, Lot</label>
<input name="StrSecondaryAddress" type="text" style="width:200px" id="StrSecondaryAddress" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "StrCity">City *</label>
<input name="StrCity" type="text" class="autosuggestinput" style="width:200px" id="StrCity" />
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "subject">State</label>
<input type="text" class="input_text" name="subject" id="subject"/>
</div>
<div style="clear:both;"> </div>
<div style="display: inline;;">
<label for "IntZip5">Zip *</label>
<input name="IntZip5" type="text" style="width:100px" id="IntZip5" />
<label for "IntZip4">Zip+4</label>
<input type="text" name="IntZip4" id="IntZip4" style="width:50px">
</div>
<div style="clear:both;"> </div>
<div style="float:left;">
<label for "IntAmount">Taxable Amount</label>
<input type="text" name="IntAmount" id="IntAmount" style="width:150px">
</div>
<div style="clear:both;"> </div>
<input type="button" class="button" value="Submit Form" />
</form>
</body>
</html>
The code you posted shows zip and zip+4 on the same line for me in Firefox, Chrome, and IE. Can you post a screen shot of how you see it differently and how you want it to look?

Resources