You Just need to use you input type field "id" same in the below code and rest is fine.
Form in browser.
Java Script Code:
JavaScript code should be use within the <Head>tab or <Body> tab.
<script language="javascript" type="text/javascript">
function myTrim(x) {
return x.replace(/^\s+|\s+$/gm,'');
}
function validateForm()
{
var full_name = document.getElementById('full_name').value;
var address_line_1 = document.getElementById('address_line_1').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var pincode = document.getElementById('pincode').value;
var country = document.getElementById('country').value;
var mobile = document.getElementById('mobile').value;
full_name = myTrim(full_name);
address_line_1 = myTrim(address_line_1);
city = myTrim(city);
state = myTrim(state);
pincode = myTrim(pincode);
country = myTrim(country);
mobile = myTrim(mobile);
if(full_name == ""){
alert("Name must be filled out");
return false;
}
if(!full_name.match(/^[A-Za-z ]+$/)){
alert("Name must be alphabetic Only ");
return false;
}
if(address_line_1 == ""){
alert("Address 1 must be filled out");
return false;
}
if(city == ""){
alert("City must be filled out");
return false;
}
if(!city.match(/^[A-Za-z]+$/)){
alert("City must be in alphabetic ");
return false;
}
if(state == ""){
alert("State must be filled out");
return false;
}
if(pincode == ""){
alert("Pin Code must be filled out");
return false;
}
if(pincode.length < 6 || pincode.length > 6 ){
alert("Pincode Code must 6x digit.");
return false;
}
if(!pincode.match(/^[0-9]*$/)){
alert("Pincode must be numeric Only ");
return false;
}
if(country == ""){
alert("Country must be filled out");
return false;
}
if(mobile == ""){
alert("Mobile must be filled out.");
return false;
}
if(mobile.length < 10 || mobile.length > 10 ){
alert("Mobile No. must ten digit.");
return false;
}
var mobile_start = mobile.substring(0,1);
if(mobile_start.match(9) || mobile_start.match(8) || mobile_start.match(7))
{
}
else
{
alert("Insert a valid mobile number.");
return false;
}
if(!mobile.match(/^[0-9]*$/)){
alert("Mobile must be numeric Only ");
return false;
}
//
alert("Mobile: "mobile_start);
/*
if(mobile_start !==9 || mobile_start !== 7){
alert("Please Enter Valid Mobile No.");
return false;
}
*/
/*
if(mobile.length < 10 || mobile.length > 10 ){
alert("Mobile No. must ten digit.");
return false;
}
if(mobile.match("^[789]\d{9}$"))
{
return true;
}
else
{
alert("message");
return false;
}
*/
}
</script>
HTML CODE:
<form name="delivery_address" method="post" action="address.php" enctype="multipart/form-data" >
<div>Full name: <div><input type="text" name="full_name" value="<?php echo $full_name; ?>" /><span style="color:red;">*</span></div></div>
<div>Address Line 1: <div><input type="text" name="address_line_1" value="<?php echo $address_line_1; ?>" /><span style="color:red;">*</span></div></div>
<div>Address Line 2: <div><input type="text" name="address_line_2" value="<?php echo $address_line_2; ?>" /></div></div>
<div>Town/City: <div><input type="text" name="city" value="<?php echo $city; ?>" required="required" /><span style="color:red;">*</span></div></div>
<div>State: <div><select name="state" id="state" >
<option value="ANDAMAN AND NICOBAR ISLANDS">ANDAMAN AND NICOBAR ISLANDS</option>
<option value="ANDHRA PRADESH">ANDHRA PRADESH</option>
<option value="ARUNACHAL PRADESH">ARUNACHAL PRADESH</option>
<option value="ASSAM">ASSAM</option>
<option value="BIHAR">BIHAR</option>
<option value="CHANDIGARH">CHANDIGARH</option>
<option value="CHHATTISGARH">CHHATTISGARH</option>
<option value="DADRA AND NAGAR HAVELI">DADRA AND NAGAR HAVELI</option>
<option value="DAMAN AND DIU">DAMAN AND DIU</option>
<option value="DELHI">DELHI</option>
<option value="GOA">GOA</option>
<option value="GUJARAT">GUJARAT</option>
<option value="HARYANA">HARYANA</option>
<option value="HIMACHAL PRADESH">HIMACHAL PRADESH</option>
<option value="JAMMU AND KASHMIR">JAMMU AND KASHMIR</option>
<option value="JHARKHAND">JHARKHAND</option>
<option value="KARNATAKA">KARNATAKA</option>
<option value="KERALA">KERALA</option>
<option value="LAKSHADWEEP">LAKSHADWEEP</option>
<option value="MADHYA PRADESH">MADHYA PRADESH</option>
<option value="MAHARASHTRA">MAHARASHTRA</option>
<option value="MANIPUR">MANIPUR</option>
<option value="MEGHALAYA">MEGHALAYA</option>
<option value="MIZORAM">MIZORAM</option>
<option value="NAGALAND">NAGALAND</option>
<option value="ORISSA">ORISSA</option>
<option value="PONDICHERRY">PONDICHERRY</option>
<option value="PUNJAB">PUNJAB</option>
<option value="RAJASTHAN">RAJASTHAN</option>
<option value="SIKKIM">SIKKIM</option>
<option value="TAMIL NADU">TAMIL NADU</option>
<option value="TELANGANA">TELANGANA</option>
<option value="TRIPURA">TRIPURA</option>
<option value="UTTAR PRADESH">UTTAR PRADESH</option>
<option value="UTTARAKHAND">UTTARAKHAND</option>
<option value="WEST BENGAL">WEST BENGAL</option>
</select><span style="color:red;">*</span></div></div>
<div>Pincode: <div><input type="text" name="pincode" value="<?php echo $pincode; ?>" required="required" /><span style="color:red;">*</span></div></div>
<div>Country: <div><select name="country" id="country">
<option value="India">India</option>
</select> <span style="color:red;">*</span></div></div>
<div>Mobile number: <div><input type="text" name="mobile" value="<?php echo $mobile; ?>" maxlength="10" required="required"/><span style="color:red;">*</span></div></div>
<div>Landmark: <div><input type="text" name="landmark" value="<?php echo $landmark; ?>" /></div></div>
<div>Address Type: <div>
<select name="address_type" value="<?php echo $address_type; ?>" >
<option value="Home">Home</option>
<option value="Company">Company</option>
</select><span style="color:red;">*</span></div></div>
<br />
<div><div><input type="submit" name="submit" value="Deliver to this address" onclick="return validateForm()" /></div></div>
</form>
