Missing Required Fields Pop-Up

[Nikita Kurguzov]

Dear Catherine,
Are these just two fields? If so, it should be very easy. Are they placed in different tabs or not? If you could also provide the Internal names of these fields, it would be even easier to write the code for you!

You can find Internal names in the designer when you select the field:

InternalName.png (4.54 KiB) Viewed 2276 times

[cmagnan]

Hi,

Thanks for your help.
The fields are not place in a tab, I provide the field name.

Single line of text:
Title
TrainingNameFrench
TargetPublicEnglish
TargetPublicFrench

Multiple Line of Text (plain text)
DescriptionEnglish
DescriptionFrench
ObjectiveEnglish
ObjectiveFrench

[Nikita Kurguzov]

Dear Catherine,
Try the following code, it should work as long as multiple line text fields are Plain text:

Code: Select all

var error = false;

function checkFields(){
	error = false;
	if(fd.field('TrainingNameFrench').value() == ''){
		setRedSingle('TrainingNameFrench');
	}
	if(fd.field('TargetPublicEnglish').value() == ''){
		setRedSingle('TargetPublicEnglish');
	}
	if(fd.field('TargetPublicFrench').value() == ''){
		setRedSingle('TargetPublicFrench');
	}
	
	if(fd.field('DescriptionEnglish').value() == ""){
		setRedMultiple('DescriptionEnglish');
	}
	
	if(fd.field('DescriptionFrench').value() == ""){
		setRedMultiple('DescriptionFrench');
	}
	
	
	if(fd.field('ObjectiveEnglish').value() == ""){
		setRedMultiple('ObjectiveEnglish');
	}
	
	
	if(fd.field('ObjectiveFrench').value() == ""){
		setRedMultiple('ObjectiveFrench');
	}
}

function setRedSingle(fieldname){
	$('.fd_field[fd_name='+fieldname+'] input').css(
        {'border-color': 'rgba(245,25,10,0.6)', 
        'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
        .change(function(){
            self = $(this);
            if (self.text){
            self.css(
                {'border-color': '', 
                'box-shadow': ''})
            }
        });
	 error = true;
}

function setRedMultiple(fieldname){
	$('.fd_field[fd_name='+fieldname+'] textarea').css(
        {'border-color': 'rgba(245,25,10,0.6)', 
        'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
        .change(function(){
            self = $(this);
            if (self.text){
            self.css(
                {'border-color': '', 
                'box-shadow': ''})
            }
        });
	 error = true;
}

fd.onsubmit(function(){
	checkFields();
	if(!error){
		return true;
	}
	else{
		alert("Please, fill in the mandatory fields!");
	}
});

[cmagnan]

Thanks, I will try it

[cmagnan]

It's perfectly working.
Thank you very much

[cmagnan]

It is working in the New Form but in the Edit form. I am receving the error
Uncaught TypeError: window.self._dlgWndTop is not a function

_layouts/15/sp.ui.dialog.js?rev=3Oh2QbaaiXSb7ldu2zd6QQ%3D%3D

I don't know what I am doing wrong. Do you have an idea?
See error in attachment

[Nikita Kurguzov]

Dear Catherine,
You are not doing anything wrong, my bad! Try to replace code with this:

Code: Select all

var error = false;

function checkFields(){
	error = false;
	if(fd.field('TrainingNameFrench').value() == ''){
		setRedSingle('TrainingNameFrench');
	}
	if(fd.field('TargetPublicEnglish').value() == ''){
		setRedSingle('TargetPublicEnglish');
	}
	if(fd.field('TargetPublicFrench').value() == ''){
		setRedSingle('TargetPublicFrench');
	}
	
	if(fd.field('DescriptionEnglish').value() == ""){
		setRedMultiple('DescriptionEnglish');
	}
	
	if(fd.field('DescriptionFrench').value() == ""){
		setRedMultiple('DescriptionFrench');
	}
	
	
	if(fd.field('ObjectiveEnglish').value() == ""){
		setRedMultiple('ObjectiveEnglish');
	}
	
	
	if(fd.field('ObjectiveFrench').value() == ""){
		setRedMultiple('ObjectiveFrench');
	}
}

function setRedSingle(fieldname){
	$('.fd_field[fd_name='+fieldname+'] input').css(
        {'border-color': 'rgba(245,25,10,0.6)', 
        'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
        .change(function(){
            var self = $(this);
            if (self.text){
            self.css(
                {'border-color': '', 
                'box-shadow': ''})
            }
        });
	 error = true;
}

function setRedMultiple(fieldname){
	$('.fd_field[fd_name='+fieldname+'] textarea').css(
        {'border-color': 'rgba(245,25,10,0.6)', 
        'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
        .change(function(){
            var self = $(this);
            if (self.text){
            self.css(
                {'border-color': '', 
                'box-shadow': ''})
            }
        });
	 error = true;
}

fd.onsubmit(function(){
	checkFields();
	if(!error){
		return true;
	}
	else{
		alert("Please, fill in the mandatory fields!");
	}
});

[cmagnan]

Thank toi vert Much Nikita

[jerinr]

Hi

Sorry to reopen old topic. I only have an additional question for above case.
I can't get code to work in case for Multiple lines (enhanced rich text format). I get it to check empty field and pop an error, but I cannot get it to color borders red.

[AlexZver]

Hi!

Please, use this function for Multiple lines with enhanced rich text format:

Code: Select all

function setRedMultipleRTF(fieldname){
	$('.fd_field[fd_name='+fieldname+']').find('div.ms-rtefield').css(
        {'border-color': 'rgba(245,25,10,0.6)', 
        'box-shadow': '0px 0px 10px 0px rgba(245,5,90,0.8)'})
        .change(function(){
            var self = $(this);
            if (self.text){
            self.css(
                {'border-color': '', 
                'box-shadow': ''})
            }
        });
	 error = true;
}