Temporary solution for pods required fields
-
Hello and thanks for the plugin
I needed that people can’t submit the edit form for the pod that I created with required fields. I found that you couldn’t implement it jet, so I have made a temporary solution that maybe, I hope, it serves to you to implement it. In my functions.php I add this action.
<?php
/**
* Enqueue a script in the WordPress ADMIN
*
* @param string $hook Hook suffix for the current admin page.
* recurs is a post type made with pods
*/
function pods_selectively_enqueue_admin_script( $hook ) {
global $parent_file;
global $pagenow;
//recurs_edit
if( 'edit.php?post_type=recurs' == $parent_file ){
wp_register_script('recurs-js', get_stylesheet_directory_uri().'/assets/js/recurs_edit.js', array('jquery'), 1.0, array(
'strategy' => 'defer','in_footer' => true));
wp_enqueue_script('recurs-js');
wp_enqueue_style( 'recurs-css', get_stylesheet_directory_uri().'/assets/css/recurs_edit.css', array( ), '1.0', 'all' );
}
}
add_action( 'admin_enqueue_scripts', 'pods_selectively_enqueue_admin_script',20,1 );the css
.form-incorrecte {
border-color: #dc3545;
border-width: 1px;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) top;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.invalid-feedback {
width: 100%;
margin-top: 0.25rem;
font-size: 0.875em;
color: #dc3545;
}
.pods-dfv-container .components-notice {
display: none;
}the js
document.onreadystatechange = function () {
if (document.readyState == "complete") {
jQuery(window).ready(function($) {
$publish = $(".editor-post-publish-button__button") ;
$descripcio = $("#pods-form-ui-pods-meta-descripcio-inici") ;//the pods field that is required
$publish.on( "click", function(e) {
//descripcio
if($descripcio.val()==""){
e.preventDefault();
e.stopPropagation();
$descripcio.addClass( "form-incorrecte" );
if($descripcio.parent().children( ".invalid-feedback" ).length == 0){
$descripcio.after( '<div class="invalid-feedback errada-1">Per favor, escriu una descripció pels destacats.</div>' );
}
}else{
$descripcio.removeClass( "form-incorrecte" );
$descripcio.parent().children( ".invalid-feedback" ).remove();
}
//scrollTop
var elem = $('.interface-interface-skeleton__content .errada-1');
//to scroll to the error element
if (elem.length) {
var main = $(".interface-interface-skeleton__content"),
t = main.offset().top + 100;
main.scrollTop(elem.offset().top - t);
}
});
});
}
}Have a good day 🙂
Viewing 2 replies - 1 through 2 (of 2 total)
-
I had to change the js because Chrome didn’t follow the
document.onreadystatechange = function () {
if (document.readyState == "complete") {I put its code again
document.onreadystatechange = function () {
if (document.readyState == "complete") {
//for jQuery pass to $
jQuery(window).ready(function($) {
//for Chrome to wait document load and click can be assigned
$(document).ready(function(){
$descripcio = $("#pods-form-ui-pods-meta-descripcio-inici") ;//my pods field id
//console.log("descripcio", $descripcio);
$publish = $(".editor-post-publish-button__button, .editor-post-publish-button") ; //publish button
//console.log("publish",$publish);
$publish.on( "click", function(e) {
//descripcio: the pods field
if($descripcio.val() ==""){
//console.log($descripcio.val());
e.preventDefault();
e.stopPropagation();
//console.log("publish");
//add classes if field is empty
$descripcio.addClass( "form-incorrecte" );
if($descripcio.parent().children( ".invalid-feedback" ).length == 0){
$descripcio.after( '<div class="invalid-feedback errada-1">Per favor, escriu una descripció pels destacats.</div>' );
}
}else{
//console.log("des1 borra");
//delete if field not empty
$descripcio.removeClass( "form-incorrecte" );
$descripcio.parent().children( ".invalid-feedback" ).remove();
}
//scrollTop to the first child with error
var elem2 = $('#pods-meta-more-fields .form-incorrecte');
//console.log("elem2",elem2);
if ( elem2.length){
//console.log("entra 2");
var elem2 = $('#pods-meta-more-fields');
//caixa del scroll
$main = $(".interface-interface-skeleton__content"),
t = $main.offset().top + 50;
//console.log($main);
//console.log("t", t);
//console.log("offset",elem2.offset().top);
$main.scrollTop(elem2.offset().top - t);
}
});
});
});
}
}I leave the console.log for you to have to test it.
Have a good Summer 🙂
Viewing 2 replies - 1 through 2 (of 2 total)
The topic ‘Temporary solution for pods required fields’ is closed to new replies.
