html <input needs to contain specific text

I have a input field and a button. Now I want it to only accept text that contains words I choose.

    <input type="hidden" name="post_id" id="fep-post-id" value="<?php echo $post_id ?>">

    <button type="button" id="fep-submit-post" class="active-btn">Go</button><img class="fep-loading-img" src="<?php echo plugins_url( 'static/img/ajax-loading.gif', dirname(__FILE__) ); ?>"/>

It is a submit form where people can only submit urls from specific websites. It is a php file within a WordPress plugin

Read More

I tried the script solution but it is messing with the plugin scripts.js I think. I assume I need to add some code in the snippet:

$("#fep-submit-post.active-btn").on('click', function() {
        tinyMCE.triggerSave();
        var title           = $("#fep-post-title").val();
        var content         = $("#fep-post-content").val();
        var bio             = $("#fep-about").val();
        var category        = $("#fep-category").val();
        var tags            = $("#fep-tags").val();
        var pid             = $("#fep-post-id").val();
        var fimg            = $("#fep-featured-image-id").val();
        var nonce           = $("#fepnonce").val();
        var message_box     = $('#fep-message');
        var form_container  = $('#fep-new-post');
        var submit_btn      = $('#fep-submit-post');
        var load_img        = $("img.fep-loading-img");
        var submission_form = $('#fep-submission-form');
        var post_id_input   = $("#fep-post-id");
        var errors          = post_has_errors(title, content, bio, category, tags, fimg);
        if( errors ){
            if( form_container.offset().top < $(window).scrollTop() ){
            $('html, body').animate({ scrollTop: form_container.offset().top-10 }, 'slow'); }
            message_box.removeClass('success').addClass('warning').html('').show().append(errors);
            return;
        }

These are the 2 files I use:

scripts.js

http://pastebin.com/4SFUbhiP

form.php

Between ===>>>>> and <<<<====== is the input field I need validated.
Below is the submit button.
http://pastebin.com/G53HScu3

Related posts

2 comments

  1. I would do this

    <form onsubmit="return validator()">
    
        <input type="hidden" name="post_id" id="fep-post-id" value="<?php echo $post_id ?>">
    
        <button type="button" id="fep-submit-post" class="active-btn">Go</button><img class="fep-loading-img" src="<?php echo plugins_url( 'static/img/ajax-loading.gif', dirname(__FILE__) ); ?>"/>
    </form>
    
    <script type="text/javascript">
        var validator = function(){
            switch (variable) {
                case "allowed":
                    submit form;
                    break;
                default:
                    return false;
            }
         }
    </script>
    

    Returning false inside the onsubmit attribute will stop the form from submitting. I just gave a basic example, using “allowed”, but you would probably have to use string functions to determine if the base URL was one of your trusted websites.

    There are probably better ways of doing this – maybe using selects – but with a little modification this should achieve your goal.

  2. Done! 🙂
    i have added this code to the scripts.js

    if ( title.toLowerCase().indexOf(‘collection’) == -1 )
    error_string += ‘alleen….
    ‘;

    if title/url not contains collection it shows error else it will submit the link. Thanks!

Comments are closed.