我是salesforce的新手，并且没有很多javascript经验。我遇到的问题是，当我测试表单并填写输入时，即使输入正确填写，它也会将“has-error”类添加到父div。但是，它将允许提交表单，因此它不会与之冲突。
我接手了另一位开发人员的工作，所以我不确定导致错误的是什么。
这是salesforce表单的javascript。我也在使用validate.js：
'use strict';
var constraints = {
// First Name
'00N4100000CJ8sT': {
presence: {
message: '^First Name is required'
},
length: {
maximum: 80
}
},
// Last Name
'00N4100000CJ8sY': {
presence: {
message: '^Last Name is required'
},
length: {
maximum: 80
}
},
// Appointment Date
'00N4100000EWaN0': {
presence: {
message: '^Date is not valid'
},
format: {
pattern: /^\d{1,2}\/\d{1,2}\/\d{4}$/,
},
},
// Patient Email
'00N4100000CJ8sE': {
presence: {
message: '^Email is required'
},
email: {
message: '^Email is not valid'
}
},
// Phone
'phone': {
presence: true,
format: {
pattern: /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/,
message: '^Phone Number is not valid'
}
}
};
$('.salesforce-form').each(function () {
var form = this;
form.addEventListener('submit', function (ev) {
ev.preventDefault();
handleFormSubmit(form);
});
var inputs = document.querySelectorAll('input, textarea, select');
for (var i = 0; i < inputs.length; ++i) {
inputs.item(i).addEventListener('change', function (ev) {
var errors = validate(form, constraints) || {};
showErrorsForInput(this, errors[this.name]);
});
}
function handleFormSubmit(form, input) {
var errors = validate(form, constraints);
showErrors(form, errors || {});
if (!errors) {
showSuccess(form);
}
}
function showErrors(form, errors) {
_.each(form.querySelectorAll('input[name], select[name]'), function (input) {
showErrorsForInput(input, errors && errors[input.name]);
});
}
function showErrorsForInput(input, errors) {
var formGroup = closestParent(input, 'form-group');
var messages = formGroup.querySelector('.messages');
resetFormGroup(formGroup);
if (errors) {
formGroup.classList.add('has-error');
_.each(errors, function (error) {
addError(messages, error);
});
} else {
formGroup.classList.add('has-success');
}
}
function closestParent(child, className) {
if (!child || child == document) {
return null;
}
if (child.classList.contains(className)) {
return child;
} else {
return closestParent(child.parentNode, className);
}
}
function resetFormGroup(formGroup) {
formGroup.classList.remove('has-error');
formGroup.classList.remove('has-success');
_.each(formGroup.querySelectorAll('.help-block.error'), function (el) {
el.parentNode.removeChild(el);
});
}
function addError(messages, error) {
var block = document.createElement('p');
block.classList.add('help-block');
block.classList.add('error');
block.innerText = error;
messages.appendChild(block);
}
function showSuccess(form) {
var myEmail = form.querySelector('#my-email').value;
if (!myEmail.length > 0) {
form.querySelector('#orgid').value = '00D41000000MWct';
var postData = $(form).serializeArray();
$.ajax({
type: 'POST',
url: '(salesforce url goes here)',
data: postData,
success: function success(data, textStatus, jqXHR) {
//data: return data from server
},
error: function error(jqXHR, textStatus, errorThrown) {
//if fails
$(form).find('.form-group').fadeOut();
$('.thank-you-message').last().clone().appendTo(form).fadeIn();
dataLayer.push({
'event': 'gtm.formSubmit',
'gtm.elementClasses': form.className
});
}
});
}
}
});
这是salesforce表单的html：
<form class="salesforce-form salesforce-contact-form" novalidate>
<div class="hide form-group">
<input id="my-email" name="my-email" type="text" />
<input type="hidden" id="orgid" name="orgid" />
<input type="hidden" id="email" name="email" value="test@email.com"/>
<input type="hidden" id="00N4100000IkI2v" name="00N4100000IkI2v" value="<?php echo get_permalink(); ?>" />
<input type="hidden" id="00N4100000IkHtO" name="00N4100000IkHtO" value="<?php echo get_client_ip(); ?>" />
<input type="hidden" id="00N4100000HxXj4" name="00N4100000HxXj4" value="New" />
<input type="hidden" id="00N4100000CL2tK" name="00N4100000CL2tK" value="Request Appointment" title="Form Type" />
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group first-name">
<label for="00N4100000CJ8sT" class="hidden">First Name</label>
<input id="00N4100000CJ8sT" maxlength="80" name="00N4100000CJ8sT" size="20" type="text" placeholder="First Name: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group last-name">
<label for="00N4100000CJ8sY" class="hidden">Last Name</label>
<input id="00N4100000CJ8sY" maxlength="80" name="00N4100000CJ8sY" size="20" type="text" placeholder="Last Name: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group email">
<label for="00N4100000CJ8sE" class="hidden">Email</label>
<input id="00N4100000CJ8sE" maxlength="80" name="00N4100000CJ8sE" size="20" type="email" placeholder="Email: *">
<div class="messages"></div>
</div>
<div class="col-md-6 col-sm-6 col-xs-6 form-group phone">
<label for="phone" class="hidden">Phone</label>
<input id="phone" maxlength="40" name="phone" size="20" type="text" placeholder="Phone: *">
<div class="messages"></div>
</div>
<div class="col-md-12 col-xs-12 form-group appointment-date">
<label for="00N4100000EWaN0" class="hidden">Appointment Date</label>
<input id="00N4100000EWaN0" name="00N4100000EWaN0" size="20" type="text" placeholder="Appointment Date: *">
<div class="messages"></div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group comments">
<label for="description" class="hidden">Comments</label>
<textarea id="description" name="description" placeholder="Comments:"></textarea>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 form-group submit">
<input type="submit" value="Submit +" class="btn small"/>
</div>
</form>
如果需要更多解释或者您需要查看任何其他文件，请告诉我。