//CSS
#error {
background: red;
color: white;
text-align: center;
padding: 10px;
display: none;
}
.selectError {
border: 1px solid red;
background: pink;
}
//JS
//disable html5 validation
document.forms.rfi.noValidate = true;
$error = $('#error')
// Bind events to forms...
$form1 = $('.strayer-rfi-wrapper form')[0]
$form2 = $('.strayer-rfi-wrapper form')[1]
$($).on('submit', function(e) {
errorMsg = 'One or more fields are invalid.<br>Please fix fields hilighted in red.'
e.preventDefault()
/*
* VALIDATE SELECT INPUT
-------------------------------*/
$selects = $(this).find('select')
$.each($selects, function(i,e) {
if(!$(e).val()) {
$(e).addClass('selectError')
//errorMsg = 'All fields required'
} else {
$(this).removeClass('selectError')
}
})
/*
* VALIDATE TEXT INPUT
-------------------------------*/
$fn = $('input[name=FirstName]')
$ln = $('input[name=LastName]')
if(!$fn.val().match(/[a-zA-Z-]{2,}/)) {
//errorMsg = 'Name is invalid'
$fn.addClass('selectError')
} else {
$(this).removeClass('selectError')
}
if(!$ln.val().match(/[a-zA-Z-]{2,}/)) {
//errorMsg = 'Name is invalid'
$ln.addClass('selectError')
} else {
$(this).removeClass('selectError')
}
if (errorMsg) {
$error.show().html(errorMsg)
} else {
$error.hide()
}
});
//HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<div id="parent-container-top" style="background:skyblue">
<div class="strayer-rfi-wrapper">
<form method="POST" name="rfi" action="/sites/all/themes/strayer2017/integrations/sparkroom/endpoint.php" novalidate=""><input type="hidden" name="LeadBuyerID" value="318"><input type="hidden" name="referrerUrl" value="http://strayer-redesign.net/"><input type="hidden" name="captureUrl" value="http://strayer-redesign.net/"><div class="fields-wrapper">
<div class="form-input-wrapper">
<select name="Degree" required>
<option value="">Degree...</option>
<option value="1">Master's</option>
<option value="2">Jack Welch Executive MBA</option>
<option value="3">Bachelor's</option>
<option value="4">Associate</option>
<option value="5">Certificates</option>
</select>
</div>
<div class="form-input-wrapper">
<select name="Program" required="true">
<option value="">Program...</option>
<option data-filter="1" data-degree="6" value="MSAC">Accounting & Finance</option>
<option data-filter="1" data-degree="6" value="MBA">Business Administration</option>
<option data-filter="1" data-degree="6" value="MED">Education & Training</option>
<option data-filter="1" data-degree="6" value="MHSA">Health Services Administration</option>
<option data-filter="1" data-degree="6" value="MSHR">Human Resource Management</option>
<option data-filter="1" data-degree="6" value="MSIA">Information Security</option>
<option data-filter="1" data-degree="6" value="MSIS">Information Systems & Technology</option>
<option data-filter="1" data-degree="6" value="MSMG">Management</option>
<option data-filter="1" data-degree="6" value="MSN">Nursing-MSN</option>
<option data-filter="1" data-degree="6" value="MPA">Public Administration</option>
<option data-filter="2" data-degree="6" value="JWEMBA">Jack Welch Executive MBA</option>
<option data-filter="3" data-degree="2" value="BBA-AC">Accounting & Finance</option>
<option data-filter="3" data-degree="2" value="BAS">Applied Science in Management</option>
<option data-filter="3" data-degree="1" value="BBA">Business Administration</option>
<option data-filter="3" data-degree="2" value="BSCJ">Criminal Justice</option>
<option data-filter="3" data-degree="2" value="BSIS">Information Systems & Technology</option>
<option data-filter="3" data-degree="2" value="BSN">Nursing-RN to BSN</option>
<option data-filter="4" data-degree="3" value="AAAC">Accounting</option>
<option data-filter="4" data-degree="3" value="AACM">Acquisition & Contract Mgt</option>
<option data-filter="4" data-degree="3" value="AABA">Business Administration</option>
<option data-filter="4" data-degree="3" value="AAIS">Information Systems & Technology</option>
<option data-filter="4" data-degree="3" value="AAMK">Marketing</option>
<option data-filter="5" data-degree="4" value="DPCM">Diploma Acquisition&Contract Mgt</option>
<option data-filter="5" data-degree="4" value="JWCRT-BL">Jack Welch Executive Certificate</option>
</select>
</div>
<div class="form-input-wrapper"><input name="FirstName" placeholder="First Name..." type="text" aria-label="First Name" required=""></div>
<div class="form-input-wrapper"><input name="LastName" placeholder="Last Name..." type="text" aria-label="Last Name" required=""></div>
<div class="form-input-wrapper">
<fieldset>
<legend>Military Affiliation?</legend>
<label><input name="Military" type="radio" value="No" checked=""> <span>No</span></label>
<label><input name="Military" type="radio" value="Yes"> <span>Yes</span></label>
</fieldset>
</div>
<div class="form-input-wrapper"><input name="Zipcode" type="text" placeholder="Zip Code..." pattern="^\d{5}(?:[-\s]\d{4})?$" aria-label="Zip Code" required=""></div>
<div class="form-input-wrapper"><input name="Email" type="email" placeholder="Email..." aria-label="Email"></div>
<div class="form-input-wrapper"><input name="Phone" type="tel" placeholder="Phone (xxx-xxx-xxxx)" pattern="^\d{3}-\d{3}-\d{4}$" aria-label="Phone" required=""></div>
<div class="disclaimer"><p>You consent to receive autodialed marketing calls or text from Strayer at the phone number you provided. Consent is not required to purchase goods or services. You can always call us at 866-314-3547.</p></div>
<span></span>
<div id="error"></div>
<input type="submit" value="Agree & Go" class="submit-button">
</div></form>
</div>
</div>
<br><br>
<div id="parent-container-bottom" style="background:orange">
<div class="strayer-rfi-wrapper">
<form method="POST" name="rfi" action="/sites/all/themes/strayer2017/integrations/sparkroom/endpoint.php" novalidate=""><input type="hidden" name="LeadBuyerID" value="318"><input type="hidden" name="referrerUrl" value="http://strayer-redesign.net/"><input type="hidden" name="captureUrl" value="http://strayer-redesign.net/"><div class="fields-wrapper">
<div class="form-input-wrapper">
<select name="Degree" required="">
<option value="">Degree...</option>
<option value="1">Master's</option>
<option value="2">Jack Welch Executive MBA</option>
<option value="3">Bachelor's</option>
<option value="4">Associate</option>
<option value="5">Certificates</option>
</select>
</div>
<div class="form-input-wrapper">
<select name="Program" required="">
<option value="">Program...</option>
<option data-filter="1" data-degree="6" value="MSAC">Accounting & Finance</option>
<option data-filter="1" data-degree="6" value="MBA">Business Administration</option>
<option data-filter="1" data-degree="6" value="MED">Education & Training</option>
<option data-filter="1" data-degree="6" value="MHSA">Health Services Administration</option>
<option data-filter="1" data-degree="6" value="MSHR">Human Resource Management</option>
<option data-filter="1" data-degree="6" value="MSIA">Information Security</option>
<option data-filter="1" data-degree="6" value="MSIS">Information Systems & Technology</option>
<option data-filter="1" data-degree="6" value="MSMG">Management</option>
<option data-filter="1" data-degree="6" value="MSN">Nursing-MSN</option>
<option data-filter="1" data-degree="6" value="MPA">Public Administration</option>
<option data-filter="2" data-degree="6" value="JWEMBA">Jack Welch Executive MBA</option>
<option data-filter="3" data-degree="2" value="BBA-AC">Accounting & Finance</option>
<option data-filter="3" data-degree="2" value="BAS">Applied Science in Management</option>
<option data-filter="3" data-degree="1" value="BBA">Business Administration</option>
<option data-filter="3" data-degree="2" value="BSCJ">Criminal Justice</option>
<option data-filter="3" data-degree="2" value="BSIS">Information Systems & Technology</option>
<option data-filter="3" data-degree="2" value="BSN">Nursing-RN to BSN</option>
<option data-filter="4" data-degree="3" value="AAAC">Accounting</option>
<option data-filter="4" data-degree="3" value="AACM">Acquisition & Contract Mgt</option>
<option data-filter="4" data-degree="3" value="AABA">Business Administration</option>
<option data-filter="4" data-degree="3" value="AAIS">Information Systems & Technology</option>
<option data-filter="4" data-degree="3" value="AAMK">Marketing</option>
<option data-filter="5" data-degree="4" value="DPCM">Diploma Acquisition&Contract Mgt</option>
<option data-filter="5" data-degree="4" value="JWCRT-BL">Jack Welch Executive Certificate</option>
</select>
</div>
<div class="form-input-wrapper"><input name="FirstName" placeholder="First Name..." type="text" aria-label="First Name" required=""></div>
<div class="form-input-wrapper"><input name="LastName" placeholder="Last Name..." type="text" aria-label="Last Name" required=""></div>
<div class="form-input-wrapper">
<fieldset>
<legend>Military Affiliation?</legend>
<label><input name="Military" type="radio" value="No" checked=""> <span>No</span></label>
<label><input name="Military" type="radio" value="Yes"> <span>Yes</span></label>
</fieldset>
</div>
<div class="form-input-wrapper"><input name="Zipcode" type="text" placeholder="Zip Code..." pattern="^\d{5}(?:[-\s]\d{4})?$" aria-label="Zip Code" required=""></div>
<div class="form-input-wrapper"><input name="Email" type="email" placeholder="Email..." aria-label="Email"></div>
<div class="form-input-wrapper"><input name="Phone" type="tel" placeholder="Phone (xxx-xxx-xxxx)" pattern="^\d{3}-\d{3}-\d{4}$" aria-label="Phone" required=""></div>
<div class="disclaimer"><p>You consent to receive autodialed marketing calls or text from Strayer at the phone number you provided. Consent is not required to purchase goods or services. You can always call us at 866-314-3547.</p></div>
<span></span>
<input type="submit" value="Agree & Go" class="submit-button">
</div></form>
</div>
</div>
</body>
</html>