I got a 3rd party contactformcheck.js that check the contact form. I am following the suggestion in How to add external javascript file with reactjs
Therefore, I change the code in contactformcheck.js
From
$(document).ready(function(){
$(function() {
if( $('.form-check').length > 0) {
$('.form-check').each(function(){
var form = $(this),
btn = form.find('.btn-submit');
btn.addClass('disabled');
// check form fields for valid or notempty inputs
function checkInput(){
form.find('.required-field').each(function(){
if($(this).hasClass('mailfield')) {
var mailfield = $(this);
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if(pattern.test(mailfield.val())){
mailfield.removeClass('empty-field');
} else {
mailfield.addClass('empty-field');
}
} else if($(this).val() != '') {
$(this).removeClass('empty-field');
} else {
$(this).addClass('empty-field');
}
});
}
// Highlight empty or not valid fields
function lightEmpty(){
form.find('.empty-field').addClass('required-field-error');
form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'visible'});
setTimeout(function(){
form.find('.empty-field').removeClass('required-field-error');
form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'hidden'});
},1000);
}
// 200ms form fields check
setInterval(function(){
checkInput();
var sizeEmpty = form.find('.empty-field').length;
if(sizeEmpty > 0){
if(btn.hasClass('disabled')){
return false
} else {
btn.addClass('disabled')
}
} else {
btn.removeClass('disabled')
}
},200);
// Button submit click
btn.click(function(){
if($(this).hasClass('disabled')){
lightEmpty();
return false
} else {
form.submit();
$('.send-success').fadeIn("300", "linear");
form[0].reset();
setTimeout(function(){$('.send-success').fadeOut("300", "linear");}, 3000);
}
});
});
}
});
});
To
export function checkForm(){
if( $('.form-check').length > 0) {
$('.form-check').each(function(){
var form = $(this),
btn = form.find('.btn-submit');
btn.addClass('disabled');
// check form fields for valid or notempty inputs
function checkInput(){
form.find('.required-field').each(function(){
if($(this).hasClass('mailfield')) {
var mailfield = $(this);
var pattern = /^([a-z0-9_\.-])+@[a-z0-9-]+\.([a-z]{2,4}\.)?[a-z]{2,4}$/i;
if(pattern.test(mailfield.val())){
mailfield.removeClass('empty-field');
} else {
mailfield.addClass('empty-field');
}
} else if($(this).val() != '') {
$(this).removeClass('empty-field');
} else {
$(this).addClass('empty-field');
}
});
}
// Highlight empty or not valid fields
function lightEmpty(){
form.find('.empty-field').addClass('required-field-error');
form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'visible'});
setTimeout(function(){
form.find('.empty-field').removeClass('required-field-error');
form.find('.empty-field').parents('.form-check-line').find('.required-field-error').css({'visibility':'hidden'});
},1000);
}
// 200ms form fields check
setInterval(function(){
checkInput();
var sizeEmpty = form.find('.empty-field').length;
if(sizeEmpty > 0){
if(btn.hasClass('disabled')){
return false
} else {
btn.addClass('disabled')
}
} else {
btn.removeClass('disabled')
}
},200);
// Button submit click
btn.click(function(){
if($(this).hasClass('disabled')){
lightEmpty();
return false
} else {
form.submit();
$('.send-success').fadeIn("300", "linear");
form[0].reset();
setTimeout(function(){$('.send-success').fadeOut("300", "linear");}, 3000);
}
});
});
}
}
In Contact.js
import React from 'react';
import ContactInfo from './components/contactInfo';
import ContactForm from './components/contactForm';
import {checkForm} from '../../styles/js/contactformcheck'
class Contact extends React.Component {
constructor(props) {
super(props);
this.handleLoad = this.handleLoad.bind(this);
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
handleLoad() {
checkForm()
}
render() {
return (
<div className="b-page-content map-bg">
<ContactInfo/>
<ContactForm/>
</div>
);
}
}
Contact.defaultProps = {
};
export default Contact;
The code above works well when I refresh the page at /contact. The problem occurs when I go to another route via header such as /home and then back to /contact, then the checking is gone. In fact, when the code is working, the mouse cursor will become a block symbol which disable the button click on 'Send Message' until the attributes are filled. When it is not working, the mouse cursor is able to click the button of Send Message.
